@extends('layouts.app')
@section('title', 'Detail Berita - ' . ($setting->nama_sekolah ?? 'Nama Sekolah'))
@section('meta')
    <meta property="og:title" content="{{ $berita->title }}">
    <meta property="og:description" content="{{ Str::limit(strip_tags($berita->content), 150) }}">
    <meta property="og:image" content="{{ asset('storage/' . $berita->image) }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:type" content="article">
@endsection
@section('content')

    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    {{-- Memastikan styling kustom yang Anda miliki tetap berfungsi --}}
    <style>
        /* Menggunakan style bawaan Anda */
        .social-btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: white;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .social-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        /* Style untuk modal (lightbox) */
        .modal {
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 9999; /* Pastikan modal berada di atas konten lain */
            transition: opacity 0.3s ease;
        }
        .modal-content {
            max-width: 90%;
            max-height: 90vh;
            width: auto;
            height: auto;
            object-fit: contain;
            transition: transform 0.3s ease;
            cursor: default;
        }
        .close-btn {
            top: 20px;
            right: 30px;
            font-size: 40px;
            font-weight: bold;
            color: #fff;
            opacity: 0.8;
            transition: opacity 0.2s;
            cursor: pointer;
        }
        .close-btn:hover {
            opacity: 1;
        }
    </style>

    <section class="bg-gray-50 py-20 px-6">
        <div class="max-w-4xl mx-auto" data-aos="fade-up">
            <!-- Judul Berita -->
            <h1 class="text-3xl font-bold text-blue-700 mb-4">{{ $berita->title }}</h1>

            <!-- Tanggal dan Admin -->
            <p class="text-gray-500 text-sm mb-6">
                Dipublikasikan pada
                {{ \Carbon\Carbon::parse($berita->news_date)->translatedFormat('d F Y') }}
                oleh <span class="font-semibold">Admin</span>
            </p>

            <!-- Gambar Utama (diperbarui dengan event klik dan cursor) -->
            @if ($berita->image)
                <img src="{{ asset('storage/' . $berita->image) }}" alt="{{ $berita->title }}"
                    class="w-full h-96 object-cover rounded-2xl shadow-md mb-8 cursor-pointer transform hover:scale-[1.01] transition duration-300"
                    data-aos="zoom-in" data-aos-delay="100"
                    onclick="openModal('{{ asset('storage/' . $berita->image) }}')">
            @endif

            <!-- Isi Berita -->
            <article class="text-gray-700 leading-relaxed space-y-4 text-justify" data-aos="fade-up" data-aos-delay="200">
                {!! $berita->content !!}
            </article>

            <!-- Lampiran jika ada -->
            @if ($berita->attachment)
                <div class="mt-6">
                    <a href="{{ asset('storage/' . $berita->attachment) }}" target="_blank"
                        class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                        <i class="bi bi-paperclip"></i> Lihat Lampiran
                    </a>
                </div>
            @endif

            <!-- Tombol Share Artikel (Menggunakan class yang sudah Anda definisikan) -->
            <div class="mt-10 text-center" data-aos="fade-up" data-aos-delay="400">
                <h5 class="text-lg font-bold mb-4">📢 Bagikan Artikel Ini</h5>
                <div class="flex justify-center flex-wrap gap-3">
                    <a href="https://api.whatsapp.com/send?text={{ rawurlencode($berita->title . ' ' . request()->fullUrl()) }}"
                        target="_blank" class="social-btn bg-green-500 hover:bg-green-600">
                        <i class="bi bi-whatsapp"></i>
                    </a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ rawurlencode(request()->fullUrl()) }}"
                        target="_blank" class="social-btn bg-blue-600 hover:bg-blue-700">
                        <i class="bi bi-facebook"></i>
                    </a>
                    <a href="https://twitter.com/intent/tweet?url={{ rawurlencode(request()->fullUrl()) }}&text={{ rawurlencode($berita->title) }}"
                        target="_blank" class="social-btn bg-black hover:bg-gray-800">
                        <i class="bi bi-twitter-x"></i>
                    </a>
                    {{-- Instagram tidak mendukung sharing via URL, jadi link ini biasanya hanya mengarah ke home page Instagram --}}
                    <a href="https://www.instagram.com/?url={{ rawurlencode(request()->fullUrl()) }}" target="_blank"
                        class="social-btn bg-pink-500 hover:bg-pink-600">
                        <i class="bi bi-instagram"></i>
                    </a>
                    <a href="mailto:?subject={{ rawurlencode($berita->title) }}&body={{ rawurlencode(request()->fullUrl()) }}"
                        class="social-btn bg-red-500 hover:bg-red-600">
                        <i class="bi bi-envelope"></i>
                    </a>
                    <button class="social-btn bg-gray-300 text-gray-800 hover:bg-gray-400" onclick="copyLink()">
                        <i class="bi bi-link-45deg"></i>
                    </button>
                </div>
                <div id="copyAlert" class="hidden mt-4 text-green-600 font-semibold">✅ Link disalin!</div>
            </div>

            <!-- Tombol Kembali -->
            <div class="mt-10 text-center">
                <a href="{{ route('berita') }}"
                    class="inline-block px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                    ← Kembali ke Daftar Berita
                </a>
            </div>
        </div>
    </section>

    <!-- Modal (Lightbox) untuk Gambar -->
    <div id="imageModal"
        class="modal fixed inset-0 flex items-center justify-center hidden opacity-0 transition-opacity"
        onclick="closeModal()">
        <!-- Tombol Tutup (Di luar gambar) -->
        <span class="close-btn absolute cursor-pointer">
            &times;
        </span>
        <!-- Konten Gambar Modal -->
        <img id="modalImage" class="modal-content transform scale-90" src="" alt="Gambar Berita"
            onclick="event.stopPropagation()">
    </div>

    <script>
        // Fungsi untuk menyalin tautan (tetap dipertahankan)
        function copyLink() {
            // Menggunakan window.location.href untuk mendapatkan URL penuh saat ini
            const fullUrl = window.location.href;
            
            // Mencoba menyalin ke clipboard
            navigator.clipboard.writeText(fullUrl).then(() => {
                const alertBox = document.getElementById('copyAlert');
                if (alertBox) {
                    alertBox.classList.remove('hidden');
                    setTimeout(() => {
                        alertBox.classList.add('hidden');
                    }, 2000);
                }
            }).catch(err => {
                console.error('Gagal menyalin tautan: ', err);
                // Fallback untuk lingkungan yang tidak mendukung clipboard API
                const dummyInput = document.createElement('textarea');
                dummyInput.value = fullUrl;
                document.body.appendChild(dummyInput);
                dummyInput.select();
                document.execCommand('copy');
                document.body.removeChild(dummyInput);
                
                const alertBox = document.getElementById('copyAlert');
                if (alertBox) {
                    alertBox.innerText = '✅ Link disalin (metode lama)!';
                    alertBox.classList.remove('hidden');
                    setTimeout(() => {
                        alertBox.classList.add('hidden');
                        alertBox.innerText = '✅ Link disalin!';
                    }, 2000);
                }
            });
        }

        // Fungsi untuk membuka modal
        function openModal(imageSrc) {
            const modal = document.getElementById('imageModal');
            const modalImage = document.getElementById('modalImage');

            // Set sumber gambar
            modalImage.src = imageSrc;

            // Tampilkan modal dengan transisi
            modal.classList.remove('hidden');
            setTimeout(() => {
                modal.classList.remove('opacity-0');
                modalImage.classList.remove('scale-90');
                modalImage.classList.add('scale-100');
            }, 10); // Delay kecil untuk memicu transisi
        }

        // Fungsi untuk menutup modal
        function closeModal() {
            const modal = document.getElementById('imageModal');
            const modalImage = document.getElementById('modalImage');

            // Mulai transisi penutupan
            modal.classList.add('opacity-0');
            modalImage.classList.add('scale-90');
            modalImage.classList.remove('scale-100');

            // Sembunyikan setelah transisi selesai
            setTimeout(() => {
                modal.classList.add('hidden');
                modalImage.src = ""; // Kosongkan sumber gambar
            }, 300); // Sesuaikan dengan durasi CSS transition (0.3s)
        }
        
        // Menambahkan listener untuk menutup modal dengan tombol ESC
        document.addEventListener('keydown', function(e) {
            if (e.key === "Escape" && !document.getElementById('imageModal').classList.contains('hidden')) {
                closeModal();
            }
        });
    </script>
@endsection