@extends('layouts.app')
@section('title', $news->title)

@section('content')

<!-- Breadcrumb -->
<section class="bg-gray-100 border-b border-gray-200">
    <div class="container mx-auto px-4 sm:px-6 max-w-7xl py-3">
        <div class="flex items-center gap-2 text-sm text-gray-500">
            <a href="/" class="hover:text-blue-600 transition-colors">Beranda</a>
            <i class="fas fa-chevron-right text-xs"></i>
            <a href="/berita" class="hover:text-blue-600 transition-colors">Portal Berita</a>
            <i class="fas fa-chevron-right text-xs"></i>
            <span class="text-gray-800 font-medium truncate max-w-[200px]">{{ $news->title }}</span>
        </div>
    </div>
</section>

<!-- Main Content -->
<div class="bg-white">
    <div class="container mx-auto px-4 sm:px-6 max-w-7xl py-8 md:py-12">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-x-12 gap-y-10">

            <!-- Konten Utama -->
            <main class="lg:col-span-2">

                <!-- Kategori -->
                @if($news->newsCategory)
                <div class="mb-4">
                    <span class="inline-block bg-blue-100 text-blue-700 text-xs font-semibold px-3 py-1.5 rounded-full">
                        {{ $news->newsCategory->title }}
                    </span>
                </div>
                @endif

                <!-- Judul -->
                <h1 class="text-2xl md:text-4xl font-bold text-gray-900 leading-tight mb-4">
                    {{ $news->title }}
                </h1>

                <!-- Meta Info -->
                <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 pb-6 border-b border-gray-100 mb-8">
                    @if($news->author)
                    <div class="flex items-center gap-2">
                        <img src="{{ asset('storage/' . $news->author->avatar) }}"
                             alt="{{ $news->author->name }}"
                             class="w-9 h-9 rounded-full object-cover">
                        <div>
                            <span class="font-semibold text-gray-800">{{ $news->author->name }}</span>
                            @if(isset($news->author->role))
                            <span class="text-gray-400 text-xs block">{{ $news->author->role }}</span>
                            @endif
                        </div>
                    </div>
                    @endif
                    <span class="flex items-center gap-1.5">
                        <i class="far fa-calendar-alt"></i>
                        {{ $news->updated_at->format('d M Y') }}
                    </span>
                    <span class="flex items-center gap-1.5">
                        <i class="far fa-clock"></i>
                        {{ $readingTime }} menit baca
                    </span>
                    <span class="flex items-center gap-1.5">
                        <i class="far fa-eye"></i>
                        {{ $news->views ?? 0 }} tayangan
                    </span>
                </div>

                <!-- Gambar Utama -->
                <figure class="mb-8 rounded-xl overflow-hidden shadow-lg">
                    <img class="w-full aspect-video object-cover"
                         src="{{ asset('storage/' . $news->thumbnail) }}"
                         alt="{{ $news->title }}">
                </figure>

                <!-- Konten -->
                <article class="prose prose-lg max-w-none prose-headings:text-gray-900 prose-a:text-blue-600 hover:prose-a:text-blue-700 prose-img:rounded-xl prose-blockquote:border-l-blue-500 prose-blockquote:bg-blue-50 prose-blockquote:py-1 prose-blockquote:px-4">
                    {!! $news->content !!}
                </article>

                <!-- Share & Tags -->
                <div class="mt-10 pt-6 border-t border-gray-100">
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <div>
                            <span class="text-sm font-semibold text-gray-700 mr-2">Bagikan:</span>
                            <div class="inline-flex gap-2 mt-2 sm:mt-0">
                                <a href="https://wa.me/?text={{ urlencode($news->title . ' ' . route('news.show', $news->slug)) }}"
                                   target="_blank"
                                   class="w-9 h-9 flex items-center justify-center bg-green-500 text-white rounded-full hover:bg-green-600 transition text-sm">
                                    <i class="fab fa-whatsapp"></i>
                                </a>
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(route('news.show', $news->slug)) }}"
                                   target="_blank"
                                   class="w-9 h-9 flex items-center justify-center bg-blue-600 text-white rounded-full hover:bg-blue-700 transition text-sm">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                                <a href="https://twitter.com/intent/tweet?text={{ urlencode($news->title) }}&url={{ urlencode(route('news.show', $news->slug)) }}"
                                   target="_blank"
                                   class="w-9 h-9 flex items-center justify-center bg-black text-white rounded-full hover:bg-gray-800 transition text-sm">
                                    <i class="fab fa-x-twitter"></i>
                                </a>
                                <button onclick="copyToClipboard('{{ route('news.show', $news->slug) }}')"
                                   class="w-9 h-9 flex items-center justify-center bg-gray-200 text-gray-600 rounded-full hover:bg-gray-300 transition text-sm"
                                   title="Salin tautan">
                                    <i class="fas fa-link"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </main>

            <!-- Sidebar -->
            <aside class="lg:col-span-1">
                <div class="sticky top-24 space-y-8">

                    <!-- Author Card -->
                    @if($news->author)
                    <div class="bg-white rounded-xl shadow-md border border-gray-100 p-6 text-center">
                        <img src="{{ asset('storage/' . $news->author->avatar) }}"
                             alt="{{ $news->author->name }}"
                             class="w-20 h-20 rounded-full object-cover mx-auto mb-3">
                        <h3 class="font-bold text-gray-900">{{ $news->author->name }}</h3>
                        @if(isset($news->author->role))
                        <p class="text-sm text-gray-500 mb-3">{{ $news->author->role }}</p>
                        @endif
                        @if(isset($news->author->bio))
                        <p class="text-sm text-gray-600">{{ $news->author->bio }}</p>
                        @endif
                    </div>
                    @endif

                    <!-- Berita Terkait -->
                    @if(isset($categories) && $categories->count() > 0)
                    <div class="bg-white rounded-xl shadow-md border border-gray-100 p-6">
                        <h3 class="font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <i class="fas fa-layer-group text-blue-600"></i>
                            Berita Terkait
                        </h3>
                        <div class="space-y-4">
                            @foreach ($categories as $related)
                            <a href="{{ route('news.show', $related->slug) }}" class="group flex gap-3">
                                <img src="{{ asset('storage/' . $related->thumbnail) }}"
                                     alt="{{ $related->title }}"
                                     class="w-20 h-16 rounded-lg object-cover flex-shrink-0">
                                <div class="min-w-0 flex-1">
                                    <h4 class="text-sm font-semibold text-gray-800 line-clamp-2 group-hover:text-blue-600 transition-colors">
                                        {{ $related->title }}
                                    </h4>
                                    <span class="text-xs text-gray-500 mt-1 block">
                                        {{ $related->updated_at->format('d M Y') }}
                                    </span>
                                </div>
                            </a>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <!-- Kategori -->
                    @php
                        $allCategories = \App\Models\NewsCategory::withCount('news')->get();
                    @endphp
                    @if($allCategories->count() > 0)
                    <div class="bg-white rounded-xl shadow-md border border-gray-100 p-6">
                        <h3 class="font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <i class="fas fa-tags text-blue-600"></i>
                            Kategori
                        </h3>
                        <div class="flex flex-wrap gap-2">
                            @foreach ($allCategories as $cat)
                            <a href="/berita?category={{ $cat->slug }}"
                               class="text-sm bg-gray-100 hover:bg-blue-100 hover:text-blue-700 text-gray-600 px-3 py-1.5 rounded-full transition-colors">
                                {{ $cat->title }} ({{ $cat->news_count }})
                            </a>
                            @endforeach
                        </div>
                    </div>
                    @endif

                </div>
            </aside>

        </div>
    </div>
</div>

<!-- Berita Unggulan -->
@if($newests->count() > 0)
<section class="bg-gray-50 py-14">
    <div class="container mx-auto px-4 sm:px-6 max-w-7xl">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h2 class="text-2xl md:text-3xl font-bold text-gray-900">Berita Terbaru</h2>
                <p class="text-gray-500 mt-1">Artikel terbaru dari Desa Cemara</p>
            </div>
            <a href="/berita" class="text-blue-600 hover:text-blue-700 font-medium text-sm flex items-center gap-1">
                Lihat Semua <i class="fas fa-arrow-right text-xs"></i>
            </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach ($newests as $newest)
            <a href="{{ route('news.show', $newest->slug) }}"
               class="group bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                <div class="relative h-48 overflow-hidden">
                    <img src="{{ asset('storage/' . $newest->thumbnail) }}"
                         alt="{{ $newest->title }}"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    @if($newest->newsCategory)
                    <div class="absolute top-3 left-3">
                        <span class="bg-white/90 backdrop-blur-sm text-gray-800 text-xs font-semibold px-2.5 py-1 rounded-full shadow">
                            {{ $newest->newsCategory->title }}
                        </span>
                    </div>
                    @endif
                </div>
                <div class="p-5">
                    <div class="flex items-center gap-2 text-xs text-gray-500 mb-2">
                        <span><i class="far fa-calendar-alt mr-1"></i>{{ $newest->updated_at->format('d M Y') }}</span>
                        <span>&middot;</span>
                        <span><i class="far fa-eye mr-1"></i>{{ $newest->views ?? 0 }}</span>
                    </div>
                    <h3 class="font-bold text-gray-800 group-hover:text-blue-600 transition-colors line-clamp-2">
                        {{ $newest->title }}
                    </h3>
                    <p class="text-sm text-gray-500 mt-2 line-clamp-2">
                        {{ Str::limit(strip_tags($newest->content), 120) }}
                    </p>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        Swal.fire({
            icon: 'success',
            title: 'Tautan Disalin!',
            text: 'Tautan berita berhasil disalin ke clipboard.',
            timer: 2000,
            showConfirmButton: false,
            toast: true,
            position: 'top-end'
        });
    });
}
</script>

@endsection