@extends('layouts.app')

@section('title', $post->title)

@section('content')
<!-- Premium Breadcrumbs -->
<nav class="mb-6 md:mb-8 flex items-center gap-2 md:gap-3 text-[10px] md:text-xs font-black uppercase tracking-widest text-gray-400 italic overflow-x-auto whitespace-nowrap pb-2 md:pb-0 scroll-hide">
    <a href="/" class="hover:text-green-700 transition flex items-center gap-1.5 shrink-0">
        <i class="fa-solid fa-house-chimney text-[10px]"></i> Beranda
    </a>
    <i class="fa-solid fa-chevron-right text-[8px] opacity-40 shrink-0"></i>
    <a href="{{ route('post.category', $post->category->slug) }}" class="hover:text-green-700 transition shrink-0">
        {{ $post->category->name ?? 'Berita' }}
    </a>
    <i class="fa-solid fa-chevron-right text-[8px] opacity-40 shrink-0"></i>
    <span class="text-green-800 line-clamp-1 opacity-70 shrink-0 lg:max-w-[300px]">
        {{ $post->title }}
    </span>
</nav>

<article class="bg-white rounded-2xl lg:rounded-3xl overflow-hidden shadow-xl border border-gray-50 mb-10 overflow-hidden transform-gpu">
    <div class="relative overflow-hidden aspect-video lg:h-[500px]">
        <img src="{{ Storage::url($post->hero_image ?? $post->thumbnail) }}" alt="{{ $post->title }}" class="w-full h-full object-cover transition duration-1000">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-black/30 to-transparent pointer-events-none"></div>
        <div class="absolute bottom-0 left-0 p-5 md:p-10 lg:p-16 text-white w-full">
            <span class="px-4 py-1.5 bg-green-600 rounded-lg text-[10px] font-black uppercase tracking-widest mb-4 inline-block shadow-lg ring-1 ring-white/10">{{ $post->category->name ?? 'Update' }}</span>
            <h1 class="text-2xl md:text-5xl lg:text-6xl font-black mb-4 md:mb-6 drop-shadow-2xl leading-tight tracking-tight">{{ $post->title }}</h1>
            <div class="flex flex-wrap items-center text-[10px] md:text-sm font-bold uppercase tracking-widest text-green-100/80 gap-y-2 gap-x-6">
                <span class="flex items-center gap-2"><i class="fa-solid fa-user text-green-400"></i>{{ $post->user->name ?? 'Admin' }}</span>
                <span class="flex items-center gap-2"><i class="fa-solid fa-calendar-alt text-green-400"></i>{{ $post->created_at->format('M d, Y') }}</span>
                <span class="flex items-center gap-2"><i class="fa-solid fa-eye text-green-400"></i>{{ $post->views }} Views</span>
            </div>
        </div>
    </div>

    <div class="px-6 md:px-12 lg:px-16 pt-10 flex flex-wrap gap-2.5 items-center" x-data="{ 
        copyUrl() {
            navigator.clipboard.writeText(window.location.href);
            alert('Link Berita Berhasil Disalin!');
        }
    }">
        <span class="text-[9px] font-black uppercase tracking-widest text-gray-400 mr-1">Bagikan:</span>
        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->fullUrl()) }}" target="_blank" class="w-9 h-9 rounded-xl bg-blue-600 text-white flex items-center justify-center hover:scale-110 transition-transform shadow-lg shadow-blue-600/10" title="Facebook">
            <i class="fa-brands fa-facebook text-[13px]"></i>
        </a>
        <a href="https://api.whatsapp.com/send?text={{ urlencode($post->title . ' - ' . request()->fullUrl()) }}" target="_blank" class="w-9 h-9 rounded-xl bg-green-500 text-white flex items-center justify-center hover:scale-110 transition-transform shadow-lg shadow-green-500/20" title="WhatsApp">
            <i class="fa-brands fa-whatsapp text-[13px]"></i>
        </a>
        <a href="https://t.me/share/url?url={{ urlencode(request()->fullUrl()) }}&text={{ urlencode($post->title) }}" target="_blank" class="w-9 h-9 rounded-xl bg-sky-500 text-white flex items-center justify-center hover:scale-110 transition-transform shadow-lg shadow-sky-500/20" title="Telegram">
            <i class="fa-brands fa-telegram text-[13px]"></i>
        </a>
        <a href="https://twitter.com/intent/tweet?text={{ urlencode($post->title) }}&url={{ urlencode(request()->fullUrl()) }}" target="_blank" class="w-9 h-9 rounded-xl bg-black text-white flex items-center justify-center hover:scale-110 transition-transform shadow-lg shadow-black/20" title="X (Twitter)">
            <i class="fa-brands fa-x-twitter text-[12px]"></i>
        </a>
        <button @click="copyUrl()" class="w-9 h-9 rounded-xl bg-gray-900 text-white flex items-center justify-center hover:scale-110 transition-transform shadow-lg shadow-gray-900/20" title="Salin Link">
            <i class="fa-solid fa-link text-[12px]"></i>
        </button>
    </div>

    <div class="p-6 md:p-12 lg:p-16 relative">
        <div class="prose prose-sm md:prose-lg lg:prose-xl prose-green max-w-none text-gray-800 leading-relaxed font-medium">
            {!! $post->content !!}
        </div>

        @if($post->tags->count() > 0)
            <div class="mt-12 pt-8 border-t border-gray-50 flex flex-wrap gap-2 text-[10px] font-black uppercase tracking-widest text-gray-400">
                @foreach($post->tags as $tag)
                    <span class="bg-gray-50 px-4 py-2 rounded-lg border border-gray-100 italic">#{{ $tag->name }}</span>
                @endforeach
            </div>
        @endif

        <!-- Iklan Tengah Artikel (Otomatis Muncul) -->
        @php $midAd = $sidebar['ads']->where('position', 'tengah')->first(); @endphp
        @if($midAd)
            <div class="my-10 p-2 bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
                <a href="{{ $midAd->link }}" target="_blank" class="block">
                    <img src="{{ Storage::url($midAd->image) }}" class="max-h-[150px] md:max-h-[200px] w-auto mx-auto rounded-xl" alt="Iklan Tengah">
                </a>
                <p class="text-[9px] uppercase font-black tracking-[0.2em] text-gray-300 mt-2 text-center">Informasi Sponsor</p>
            </div>
        @endif
    </div>

    <!-- Section Komentar -->
    <div class="px-6 md:px-12 lg:px-16 pb-12" x-data="{ modalOpen: false }">
        <div class="border-t border-gray-100 pt-10">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-10">
                <h3 class="text-2xl font-black text-gray-900 tracking-tighter">
                    KOMENTAR <span class="text-green-600">({{ $comments->count() }})</span>
                </h3>
                <button @click="modalOpen = true" class="bg-green-700 text-white px-6 py-3 rounded-xl font-bold text-sm shadow-lg hover:shadow-green-200 transition-all flex items-center gap-2 w-fit">
                    <i class="fa-solid fa-comment-dots"></i> TAMBAH KOMENTAR
                </button>
            </div>

            <div class="space-y-6">
                @forelse($comments as $comment)
                    <div class="bg-gray-50 p-6 rounded-2xl border border-gray-100 flex gap-4">
                        <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center shrink-0">
                            <i class="fa-solid fa-user text-green-700"></i>
                        </div>
                        <div>
                            <div class="flex items-center gap-3 mb-1">
                                <h4 class="font-bold text-gray-900">{{ $comment->name }}</h4>
                                <span class="text-[10px] uppercase font-black text-gray-400 tracking-widest">{{ $comment->created_at->diffForHumans() }}</span>
                            </div>
                            <p class="text-sm text-gray-600 leading-relaxed italic">{{ $comment->content }}</p>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-10 bg-gray-50 rounded-2xl border border-dashed text-gray-400 font-bold text-xs uppercase tracking-widest">
                        Belum ada komentar. Jadilah yang pertama!
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Modal Melayang (Comment Form) - Pindah keluar agar benar-benar melayang di atas -->
        <template x-teleport="body">
            <div x-show="modalOpen" 
                x-cloak 
                class="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/60 backdrop-blur-md"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100">
                
                <div class="bg-white w-full max-w-lg rounded-3xl shadow-2xl overflow-hidden border border-gray-100"
                    x-transition:enter="transition ease-out duration-300 transform"
                    x-transition:enter-start="scale-95 opacity-0 translate-y-10"
                    x-transition:enter-end="scale-100 opacity-100 translate-y-0"
                    @click.away="modalOpen = false">
                    
                    <div class="bg-green-50 p-6 md:p-8 flex justify-between items-center relative border-b border-green-100">
                        <div class="relative z-10">
                            <h4 class="font-black tracking-tighter text-xl md:text-2xl mb-1 uppercase text-green-900">✍️ Kirim Komentar</h4>
                            <p class="text-[9px] md:text-[10px] font-black uppercase tracking-widest text-green-700 opacity-70">Aspirasi Anda untuk kemajuan Desa</p>
                        </div>
                        <button @click="modalOpen = false" class="relative z-10 w-8 h-8 md:w-10 md:h-10 flex items-center justify-center bg-green-100 text-green-800 rounded-full hover:bg-green-200 transition-all">
                            <i class="fa-solid fa-xmark text-lg"></i>
                        </button>
                    </div>

                    <form action="{{ route('post.comment', $post->id) }}" method="POST" class="p-6 md:p-10 space-y-5 md:space-y-6">
                        @csrf
                        <div class="grid grid-cols-1 gap-5 md:gap-6">
                            <div class="space-y-2">
                                <label class="block text-[10px] font-black uppercase text-gray-500 tracking-widest ml-1">Nama Lengkap</label>
                                <input type="text" name="name" required placeholder="Tulis nama lengkap Anda" class="w-full bg-gray-50 border border-gray-200 rounded-xl md:rounded-2xl p-3 md:p-4 focus:ring-1 focus:ring-green-600 focus:border-green-600 transition-all font-bold text-gray-900 placeholder:text-gray-400 text-sm">
                            </div>
                            <div class="space-y-2">
                                <label class="block text-[10px] font-black uppercase text-gray-500 tracking-widest ml-1">Alamat Email</label>
                                <input type="email" name="email" required placeholder="Tulis email aktif Anda" class="w-full bg-gray-50 border border-gray-200 rounded-xl md:rounded-2xl p-3 md:p-4 focus:ring-1 focus:ring-green-600 focus:border-green-600 transition-all font-bold text-gray-900 placeholder:text-gray-400 text-sm">
                            </div>
                        </div>
                        <div class="space-y-2">
                            <label class="block text-[10px] font-black uppercase text-gray-500 tracking-widest ml-1">Pesan Komentar</label>
                            <textarea name="content" required placeholder="Apa yang ingin Anda sampaikan? (Minimal 5 kata)" class="w-full bg-gray-50 border border-gray-200 rounded-xl md:rounded-2xl p-3 md:p-4 h-32 md:h-40 focus:ring-1 focus:ring-green-600 focus:border-green-600 transition-all font-bold text-gray-900 placeholder:text-gray-400 resize-none text-sm"></textarea>
                        </div>
                        <div class="pt-2 md:pt-4">
                            <button type="submit" class="w-full bg-green-700 text-white font-black py-4 md:py-5 rounded-xl md:rounded-2xl shadow-xl shadow-green-100 hover:shadow-green-200 hover:-translate-y-0.5 active:translate-y-0 transition-all uppercase tracking-widest text-xs md:text-sm">
                                KIRIM SEKARANG
                            </button>
                            <p class="text-[9px] md:text-[10px] text-center text-gray-500 mt-4 font-black uppercase tracking-widest leading-relaxed">
                                Komentar akan tayang setelah <br class="md:hidden"> disetujui oleh admin
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </template>
    </div>
</article>

@if($related->count() > 0)
<div class="mb-16">
    <div class="flex items-center gap-4 mb-8">
        <h3 class="text-xl font-black text-gray-900 tracking-tighter uppercase shrink-0">Berita Terkait</h3>
        <div class="h-0.5 bg-green-600/20 w-full rounded-full"></div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        @foreach($related as $rel)
            <article class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 group flex flex-col h-full border border-gray-50">
                <a href="{{ route('post.show', $rel->slug) }}" class="block overflow-hidden aspect-video shrink-0">
                    <img src="{{ Storage::url($rel->thumbnail) }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                </a>
                <div class="p-5 flex flex-col flex-1">
                    <h4 class="text-sm md:text-base font-bold mb-3 leading-snug line-clamp-2 italic">
                        <a href="{{ route('post.show', $rel->slug) }}" class="group-hover:text-green-700 transition">{{ $rel->title }}</a>
                    </h4>
                    <div class="flex items-center justify-between mt-auto text-[9px] font-black uppercase text-gray-400 tracking-tighter pt-4">
                        <span>{{ $rel->created_at->format('M Y') }}</span>
                        <a href="{{ route('post.show', $rel->slug) }}" class="text-green-700 hover:tracking-widest transition-all">Baca →</a>
                    </div>
                </div>
            </article>
        @endforeach
    </div>
</div>
@endif
@endsection