@extends('frontend.template-frontend')
@section('title', $news['post_title'] . ' | Amal Prihatin Sabah')
@section('meta_description', Str::limit(strip_tags($news['post_content']), 160))
@section('meta_keywords', $news['category']['category_name'] . ', berita, buletin, amal prihatin sabah')

@section('og_title', $news['post_title'])
@section('og_description', Str::limit(strip_tags($news['post_content']), 160))
@section('og_image', $news['thumbnail'] ?? asset('assets/icon-paks/logo-aps.png'))

@section('twitter_title', $news['post_title'])
@section('twitter_description', Str::limit(strip_tags($news['post_content']), 160))
@section('twitter_image', $news['thumbnail'] ?? asset('assets/icon-paks/logo-aps.png'))

@section('content')
    <section class="lg:max-w-[1080px] w-full mx-auto pt-24">
        <div class="flex lg:flex-row flex-col gap-6">
            <!-- Main Content -->
            <div class="w-full lg:max-w-4xl px-4 lg:px-0">
                <!-- Breadcrumb -->
                <nav class="flex mb-6" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="/"
                                class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-orange-400">
                                <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                    fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
                                </svg>
                                Laman Utama
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 9 4-4-4-4" />
                                </svg>
                                <a href="/buletin"
                                    class="ms-1 text-sm font-medium text-gray-700 hover:text-orange-400 md:ms-2">Buletin</a>
                            </div>
                        </li>
                        <li aria-current="page">
                            <div class="flex items-center">
                                <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 9 4-4-4-4" />
                                </svg>
                                <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2">Detail Berita</span>
                            </div>
                        </li>
                    </ol>
                </nav>

                <!-- Article Header -->
                <div class="mb-6">
                    <div class="flex items-center gap-3 mb-4">
                        <span class="bg-orange-100 text-orange-600 text-xs font-medium px-3 py-1 rounded-full">
                            {{ $news['category']['category_name'] }}
                        </span>
                        <span class="text-gray-500 text-sm">
                            {{ \Carbon\Carbon::parse($news['published_at'])->format('d M Y') }}
                        </span>
                    </div>

                    <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
                        {{ $news['post_title'] }}
                    </h1>

                    <!-- Brand Info -->
                    <div class="flex items-center gap-4 mb-6 p-4 bg-gray-50 rounded-lg">
                        <div class="flex-shrink-0">
                            <img src="{{ $news['brand']['brand_logo'] }}" alt="{{ $news['brand']['brand_name'] }}"
                                class="w-12 h-12 rounded-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900">{{ $news['brand']['brand_name'] }}</h4>
                            <p class="text-sm text-gray-600">{{ $news['brand']['brand_desc'] }}</p>
                        </div>
                    </div>
                </div>

                <!-- Featured Image -->
                @if ($news['thumbnail'])
                    <div class="mb-8">
                        <img src="{{ $news['thumbnail'] }}" alt="{{ $news['post_title'] }}"
                            class="w-full h-64 lg:h-96 object-cover rounded-lg shadow-lg">
                    </div>
                @endif

                <!-- Article Content -->
                <div class="prose prose-lg max-w-none">
                    <div class="text-gray-800 leading-relaxed">
                        {!! $news['post_content'] !!}
                    </div>
                </div>

                <!-- Share Section -->
                <div class="mt-8 pt-6 border-t border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Kongsi Berita</h3>
                    <div class="flex gap-4">
                        <button onclick="shareToFacebook()"
                            class="flex items-center justify-center w-12 h-12 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition-colors">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                <path
                                    d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                            </svg>
                        </button>

                        <button onclick="copyLink()" id="copy-btn"
                            class="flex items-center justify-center w-12 h-12 bg-gray-600 hover:bg-gray-700 rounded-lg text-white transition-colors">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
                                </path>
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- Back Button -->
                <div class="mt-8">
                    <a href="/buletin"
                        class="inline-flex items-center gap-2 px-4 py-2 bg-orange-400 hover:bg-orange-500 text-white font-medium rounded-lg transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
                            </path>
                        </svg>
                        Kembali ke Buletin
                    </a>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="w-full lg:max-w-sm px-4 lg:px-0">
                <div class="bg-white rounded-lg shadow-sm border p-6 lg:sticky lg:top-24">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Maklumat Berita</h3>

                    <div class="space-y-4">
                        <div>
                            <span class="text-sm text-gray-600">Kategori:</span>
                            <p class="font-medium text-gray-900">{{ $news['category']['category_name'] }}</p>
                        </div>

                        <div>
                            <span class="text-sm text-gray-600">Tarikh Terbit:</span>
                            <p class="font-medium text-gray-900">
                                {{ \Carbon\Carbon::parse($news['published_at'])->format('d F Y') }}</p>
                        </div>

                        <div>
                            <span class="text-sm text-gray-600">Diterbitkan oleh:</span>
                            <p class="font-medium text-gray-900">{{ $news['brand']['brand_name'] }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="lg:hidden pb-8"></div>
@endsection

@push('script')
    <script>
        function shareToFacebook() {
            const url = encodeURIComponent(window.location.href);
            const text = encodeURIComponent('{{ $news['post_title'] }}');
            window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
        }

        function copyLink() {
            navigator.clipboard.writeText(window.location.href).then(function() {
                const button = document.getElementById('copy-btn');
                const originalHtml = button.innerHTML;
                button.innerHTML =
                    '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>';
                button.classList.remove('bg-gray-600', 'hover:bg-gray-700');
                button.classList.add('bg-green-600');

                setTimeout(function() {
                    button.innerHTML = originalHtml;
                    button.classList.remove('bg-green-600');
                    button.classList.add('bg-gray-600', 'hover:bg-gray-700');
                }, 2000);
            });
        }
    </script>
@endpush