@extends('visitor.layout.tamplate')

@section('meta')
    <title>{{ $berita->title }} - {{ $setting->website_name ?? 'YPTP Papua' }}</title>
    <meta name="description" content="{{ Str::limit(strip_tags($berita->content), 160) }}">
    <meta property="og:title" content="{{ $berita->title }}">
    <meta property="og:description" content="{{ Str::limit(strip_tags($berita->content), 160) }}">
    <meta property="og:image" content="{{ asset('uploads/news/meta/' . $berita->image_meta) }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta name="twitter:card" content="summary_large_image">
@endsection

@section('content')
    {{-- 1. Hero Section Berita (Gaya Dark & Modern Sesuai Request) --}}
    <section class="pt-44 pb-20 bg-sky-950 relative overflow-hidden">
        {{-- Background Image Overlay --}}
        <div class="absolute inset-0 opacity-10">
            <img src="{{ asset('uploads/news/' . $berita->image) }}" class="w-full h-full object-cover">
        </div>

        <div class="max-w-7xl mx-auto px-6 relative z-10 text-center">
            <span
                class="bg-yellow-400 text-sky-950 px-6 py-2 rounded-full text-[10px] md:text-xs font-black uppercase tracking-widest mb-6 inline-block animate-fade-in">
                {{ $berita->category->name }}
            </span>
            <h1 class="text-3xl md:text-6xl font-extrabold text-white mb-8 leading-[1.15]">
                {{ $berita->title }}
            </h1>

            {{-- Meta Info di Hero --}}
            <div class="flex flex-wrap items-center justify-center gap-4 md:gap-8 text-sky-100/80 text-xs md:text-sm">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-full bg-yptp-blue/20 flex items-center justify-center text-yptp-blue">
                        <i class="fas fa-user-edit"></i>
                    </div>
                    <span class="font-bold text-white">Administrator</span>
                </div>
                <div class="hidden md:block w-px h-4 bg-white/20"></div>
                <div class="flex items-center gap-2">
                    <i class="far fa-calendar-alt text-yptp-blue"></i>
                    <span>{{ $berita->created_at->translatedFormat('d F Y') }}</span>
                </div>
                <div class="hidden md:block w-px h-4 bg-white/20"></div>
                <div class="flex items-center gap-2">
                    <i class="far fa-eye text-yptp-blue"></i>
                    <span>{{ $berita->views ?? 0 }} Dilihat</span>
                </div>
            </div>
        </div>
    </section>

    {{-- 2. Content Section --}}
    <div class="bg-white pb-20">
        <div class="max-w-7xl mx-auto px-6">

            {{-- Breadcrumbs & Search Bar --}}
            <div
                class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 py-10 border-b border-slate-100 mb-12">
                <nav class="flex items-center gap-3 text-[10px] md:text-xs font-bold uppercase tracking-widest">
                    <a href="{{ route('home') }}" class="text-slate-400 hover:text-yptp-blue transition">Home</a>
                    <i class="fas fa-chevron-right text-[8px] text-slate-300"></i>
                    <a href="{{ route('berita') }}" class="text-slate-400 hover:text-yptp-blue transition">Berita</a>
                    <i class="fas fa-chevron-right text-[8px] text-slate-300"></i>
                    <span class="text-yptp-blue">{{ $berita->category->name }}</span>
                </nav>

                <form action="{{ route('berita') }}" method="GET" class="relative w-full md:w-64">
                    <input type="text" name="search" placeholder="Cari berita..."
                        class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2.5 pl-10 pr-4 focus:ring-2 focus:ring-yptp-blue outline-none text-sm transition-all">
                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
                </form>
            </div>

            {{-- Main Layout Grid --}}
            <div class="grid lg:grid-cols-3 gap-12 lg:gap-16">

                {{-- KOLOM KIRI: Konten Utama --}}
                <div class="lg:col-span-2">
                    <article>
                        {{-- Featured Image --}}
                        <div
                            class="rounded-[2.5rem] overflow-hidden mb-12 shadow-2xl shadow-sky-900/10 border border-slate-100">
                            <img src="{{ asset('uploads/news/' . $berita->image) }}"
                                class="w-full h-auto object-cover max-h-[550px] hover:scale-105 transition-transform duration-700">
                        </div>

                        {{-- Article Content --}}
                        <div
                            class="prose prose-lg max-w-none text-slate-600 leading-relaxed 
            prose-headings:text-sky-950 prose-a:text-yptp-blue 
            prose-img:rounded-3xl prose-img:shadow-lg
            
            {{-- Kustomisasi CKEditor: Justify & Spacing --}}
            [&>p]:text-justify 
            [&>p]:mb-8 
            [&>p]:pb-2 
            [&_ul]:list-disc [&_ul]:ml-6 [&_ul]:mb-6
            [&_ol]:list-decimal [&_ol]:ml-6 [&_ol]:mb-6
            [&_li]:mb-3 [&_li]:text-justify
            [&_blockquote]:border-l-4 [&_blockquote]:border-yptp-blue [&_blockquote]:italic [&_blockquote]:bg-slate-50 [&_blockquote]:p-6 [&_blockquote]:rounded-r-2xl">

                            {!! $berita->content !!}

                        </div>

                        {{-- Social Share Buttons --}}
                        <div
                            class="mt-16 p-8 bg-slate-50 rounded-[2rem] border border-slate-100 flex flex-col md:flex-row items-center justify-between gap-6">
                            <h4 class="font-bold text-sky-950 flex items-center gap-2">
                                <i class="fas fa-share-alt text-yptp-blue"></i> Bagikan Artikel:
                            </h4>
                            <div class="flex gap-4">
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
                                    target="_blank"
                                    class="w-12 h-12 bg-white text-[#1877F2] rounded-2xl flex items-center justify-center hover:bg-[#1877F2] hover:text-white transition-all shadow-sm border border-slate-200 group">
                                    <i class="fab fa-facebook-f group-hover:scale-110 transition"></i>
                                </a>
                                <a href="https://api.whatsapp.com/send?text={{ urlencode($berita->title . ' - ' . url()->current()) }}"
                                    target="_blank"
                                    class="w-12 h-12 bg-white text-[#25D366] rounded-2xl flex items-center justify-center hover:bg-[#25D366] hover:text-white transition-all shadow-sm border border-slate-200 group">
                                    <i class="fab fa-whatsapp group-hover:scale-110 transition"></i>
                                </a>
                            </div>
                        </div>
                    </article>

                    {{-- Section Form Komentar --}}
                    @if ($berita->status_comment)
                        <section class="mt-16 pt-16 border-t border-slate-100">
                            <div
                                class="bg-white p-8 md:p-12 rounded-[3rem] border border-slate-100 shadow-2xl shadow-sky-900/5">
                                <div class="mb-10 text-center md:text-left">
                                    <h3 class="text-2xl font-bold text-sky-950 mb-2 italic">Tinggalkan Pesan</h3>
                                    <p class="text-slate-500 text-sm">Email Anda tidak akan dipublikasikan. Ruas wajib
                                        ditandai *</p>
                                </div>

                                {{-- Notifikasi --}}
                                @if (session('success') || session('error'))
                                    <div class="mb-8 animate-fade-in-down">
                                        <div
                                            class="flex items-center gap-4 {{ session('success') ? 'bg-emerald-50 text-emerald-700 border-emerald-100' : 'bg-red-50 text-red-700 border-red-100' }} border px-6 py-4 rounded-2xl">
                                            <i
                                                class="fas {{ session('success') ? 'fa-check-circle' : 'fa-exclamation-triangle' }}"></i>
                                            <p class="text-sm font-bold">{{ session('success') ?? session('error') }}</p>
                                        </div>
                                    </div>
                                @endif

                                <form action="{{ route('kirim-komentar', $berita->id) }}" method="POST" class="space-y-6">
                                    @csrf
                                    <div class="grid md:grid-cols-2 gap-6">
                                        <div class="space-y-2">
                                            <label
                                                class="text-xs font-bold text-sky-950 uppercase tracking-widest ml-1">Nama
                                                Lengkap *</label>
                                            <input type="text" name="name" value="{{ old('name') }}" required
                                                class="w-full bg-slate-50 border border-slate-100 rounded-2xl py-4 px-6 focus:ring-2 focus:ring-yptp-blue focus:bg-white outline-none transition-all">
                                        </div>
                                        <div class="space-y-2">
                                            <label
                                                class="text-xs font-bold text-sky-950 uppercase tracking-widest ml-1">Alamat
                                                Email *</label>
                                            <input type="email" name="email" value="{{ old('email') }}" required
                                                class="w-full bg-slate-50 border border-slate-100 rounded-2xl py-4 px-6 focus:ring-2 focus:ring-yptp-blue focus:bg-white outline-none transition-all">
                                        </div>
                                    </div>
                                    <div class="space-y-2">
                                        <label
                                            class="text-xs font-bold text-sky-950 uppercase tracking-widest ml-1">Komentar
                                            Anda *</label>
                                        <textarea name="comment" rows="6" required
                                            class="w-full bg-slate-50 border border-slate-100 rounded-[2rem] py-4 px-6 focus:ring-2 focus:ring-yptp-blue focus:bg-white outline-none transition-all">{{ old('comment') }}</textarea>
                                    </div>
                                    <button type="submit"
                                        class="group bg-sky-950 hover:bg-yptp-blue text-white px-10 py-5 rounded-2xl font-bold transition-all shadow-lg flex items-center gap-3 active:scale-95">
                                        <span>Kirim Komentar Sekarang</span>
                                        <i
                                            class="fas fa-paper-plane group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform text-xs"></i>
                                    </button>
                                </form>
                            </div>
                        </section>
                    @endif

                    {{-- Diskusi --}}
                    <div class="mt-16 mb-10">
                        <h3 class="text-2xl font-bold text-sky-950 mb-8 flex items-center gap-3">
                            <i class="far fa-comments text-yptp-blue"></i> Diskusi ({{ $berita->comments->count() }})
                        </h3>
                        <div class="space-y-6">
                            @forelse($berita->comments as $c)
                                <div
                                    class="flex gap-5 p-6 md:p-8 bg-slate-50 rounded-[2rem] border border-slate-100 transition-all hover:bg-white hover:shadow-xl hover:shadow-sky-900/5 group">
                                    <div
                                        class="w-12 h-12 bg-gradient-to-br from-yptp-blue to-sky-700 text-white rounded-2xl flex items-center justify-center font-bold text-lg shadow-lg shrink-0 transition-transform group-hover:rotate-3">
                                        {{ strtoupper(substr($c->name, 0, 2)) }}
                                    </div>
                                    <div class="flex-grow">
                                        <div class="flex flex-col md:flex-row md:items-center justify-between gap-2 mb-3">
                                            <h5 class="font-bold text-sky-950 text-base">{{ $c->name }}</h5>
                                            <span
                                                class="text-[10px] md:text-xs text-slate-400 font-medium flex items-center gap-1.5">
                                                <i class="far fa-clock"></i> {{ $c->created_at->diffForHumans() }}
                                            </span>
                                        </div>
                                        <div
                                            class="text-slate-600 text-sm leading-relaxed bg-white/50 p-4 rounded-2xl border border-slate-100/50">
                                            {{ $c->comment }}
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div
                                    class="text-center py-16 bg-slate-50 rounded-[3rem] border-2 border-dashed border-slate-200">
                                    <p class="text-slate-400 italic text-sm">Belum ada diskusi. Jadilah yang pertama
                                        memberikan komentar!</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>

                {{-- KOLOM KANAN: Sidebar --}}
                <div class="lg:col-span-1">
                    <aside class="sticky top-32 space-y-12">
                        {{-- Rekomendasi --}}
                        <div class="bg-white rounded-[2rem] p-8 border border-slate-100 shadow-sm">
                            <h3 class="text-xl font-bold text-sky-950 mb-8 flex items-center gap-3">
                                <span class="w-2 h-8 bg-yptp-blue rounded-full"></span> Rekomendasi
                            </h3>
                            <div class="space-y-8">
                                @foreach ($recommendations as $rec)
                                    <a href="{{ route('baca-berita', $rec->slug) }}"
                                        class="group flex gap-4 items-center">
                                        <div class="w-20 h-20 shrink-0 rounded-xl overflow-hidden shadow-md">
                                            <img src="{{ asset('uploads/news/' . $rec->image) }}"
                                                class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                                        </div>
                                        <div>
                                            <h4
                                                class="font-bold text-sky-950 text-sm leading-snug line-clamp-2 group-hover:text-yptp-blue transition">
                                                {{ $rec->title }}</h4>
                                            <p class="text-[10px] text-yptp-blue mt-1 uppercase font-bold">
                                                {{ $rec->category->name }}</p>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>

                        {{-- Banner Donasi Sidebar --}}
                        <div
                            class="p-8 bg-gradient-to-br from-yptp-blue to-sky-900 rounded-[2.5rem] text-white shadow-2xl shadow-sky-900/20 relative overflow-hidden group">
                            <div class="relative z-10">
                                <h4 class="font-bold text-xl text-black mb-3 italic">Dukung <br>Talenta Papua</h4>
                                <p class="text-xs text-black eading-relaxed mb-8">Kontribusi Anda membantu masa depan
                                    pendidikan anak-anak Papua Tengah.</p>
                                <a href="{{ route('donasi') }}"
                                    class="block text-center bg-yellow-400 text-sky-950 py-4 rounded-2xl font-black text-sm hover:bg-white hover:scale-105 transition-all shadow-lg">
                                    DONASI SEKARANG
                                </a>
                            </div>
                            <div
                                class="absolute -right-10 -bottom-10 w-40 h-40 bg-white/10 rounded-full blur-3xl group-hover:scale-150 transition-all duration-700">
                            </div>
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </div>
@endsection