@extends('layouts.app')

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

@section('content')
<div class="container mx-auto px-4 py-10 max-w-3xl">
    <div class="bg-white dark:bg-gray-900 shadow rounded-xl overflow-hidden">

        {{-- Gambar Utama --}}
        <div class="mb-4 overflow-hidden group">
            @if ($news->image)
                <img src="{{ asset('storage/' . $news->image) }}"
                     alt="{{ $news->title }}"
                     class="w-full h-64 object-cover rounded transition-transform duration-500 ease-in-out group-hover:scale-105">
            @else
                <div class="w-full h-64 bg-gray-300 dark:bg-gray-700 rounded flex items-center justify-center text-gray-500">
                    Tidak ada gambar
                </div>
            @endif
        </div>

        {{-- Konten --}}
        <div class="p-6">
            <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">
                {{ $news->title }}
            </h1>

            <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
                Dipublikasikan pada {{ \Carbon\Carbon::parse($news->publish_date)->translatedFormat('d F Y') }}
            </p>

            <div class="prose dark:prose-invert max-w-none">
                {!! html_entity_decode($news->content) !!}
            </div>

            {{-- Tombol Bagikan --}}
            <div class="mt-6 flex flex-wrap gap-3 items-center">
                <span class="text-sm text-gray-600 dark:text-gray-300">Bagikan:</span>
                @php
                    $shareUrl = urlencode(route('frontend.berita.show', $news->slug));
                    $shareTitle = urlencode($news->title);
                @endphp
                <a href="https://wa.me/?text={{ $shareTitle }}+{{ $shareUrl }}"
                   target="_blank" rel="noopener"
                   class="bg-green-500 hover:bg-green-600 text-white text-sm px-3 py-1 rounded"
                   aria-label="Bagikan ke WhatsApp">WhatsApp</a>

                <a href="https://www.facebook.com/sharer/sharer.php?u={{ $shareUrl }}"
                   target="_blank" rel="noopener"
                   class="bg-blue-600 hover:bg-blue-700 text-white text-sm px-3 py-1 rounded"
                   aria-label="Bagikan ke Facebook">Facebook</a>

                <a href="https://twitter.com/intent/tweet?url={{ $shareUrl }}&text={{ $shareTitle }}"
                   target="_blank" rel="noopener"
                   class="bg-blue-400 hover:bg-blue-500 text-white text-sm px-3 py-1 rounded"
                   aria-label="Bagikan ke Twitter">Twitter</a>
            </div>
        </div>

        {{-- Tombol Kembali --}}
        <div class="border-t p-4 flex justify-between items-center bg-gray-50 dark:bg-gray-800">
            <a href="{{ route('frontend.landing') }}"
               class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 transition duration-200">
                ← Kembali ke Beranda
            </a>
            <p class="text-xs text-gray-400">
                Terakhir diperbarui: {{ $news->updated_at->diffForHumans() }}
            </p>
        </div>
    </div>

    {{-- Berita Terkait --}}
    @if($relatedNews->count())
        <div class="mt-10">
            <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">📰 Berita Terkait</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                @foreach($relatedNews as $item)
                <a href="{{ $item->slug ? route('frontend.berita.show', $item->slug) : '#' }}"
                   class="group bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">

                    @if ($item->image && file_exists(public_path('storage/' . $item->image)))
                        <div class="overflow-hidden h-40 w-full">
                            <img src="{{ asset('storage/' . $item->image) }}"
                                 alt="{{ $item->title }}"
                                 class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        </div>
                    @else
                        <div class="h-40 w-full bg-gray-300 dark:bg-gray-700 flex items-center justify-center text-gray-500">
                            Tidak ada gambar
                        </div>
                    @endif

                    <div class="p-4">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-1">
                            {{ $item->title }}
                        </h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">
                            {{ \Illuminate\Support\Str::limit(strip_tags($item->content), 100) }}
                        </p>
                    </div>
                </a>
            @endforeach

            </div>
        </div>
    @endif
</div>
@endsection