@extends('layouts.admin')

@section('title', 'Berita Sekolah')

@section('content')
<div class="bg-white dark:bg-gray-900 p-6 rounded-xl shadow transition duration-300">

    <!-- HEADER: Judul di atas, form pencarian di bawah -->
<!-- HEADER: Judul di atas, form pencarian di bawah -->
<div class="mb-6">

    <!-- Judul -->
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">
        Manajemen Berita Sekolah
    </h2>

    <!-- Bar Pencarian -->
    <div class="flex flex-col md:flex-row items-center justify-between gap-3">

        <!-- Form Search -->
        <form action="{{ route('admin.news.index') }}" method="GET" 
              class="flex items-center w-full md:flex-row gap-2">

            <!-- Input Pencarian -->
            <input
                type="text"
                name="search"
                value="{{ request('search') }}"
                placeholder="Cari judul berita..."
                class="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 
                       bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 
                       focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
            />

            <!-- Tombol Aksi di sebelah kanan -->
            <div class="flex items-center gap-2 flex-shrink-0">

                <!-- Tombol Cari -->
                <button type="submit"
                    class="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 
                           text-white rounded-lg font-medium shadow-md transition duration-150">
                    🔍 <span>Cari Berita</span>
                </button>

                <!-- Tombol Reset (hanya muncul jika ada pencarian aktif) -->
                @if(request('search'))
                    <a href="{{ route('admin.news.index') }}"
                       class="flex items-center gap-2 px-4 py-2 bg-gray-600 hover:bg-gray-700 
                              text-white rounded-lg font-medium shadow-md transition duration-150">
                        🔄 <span>Reset Pencarian</span>
                    </a>
                @endif

                <!-- Tombol Tambah Berita -->
                <button type="button" id="addNewsBtn"
    class="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 
           text-white rounded-lg font-semibold shadow-md transition duration-200 hover:scale-105">
    ➕ <span>Tambah Berita</span>
</button>
            </div>
        </form>

    </div>



<div class="bg-white/5 dark:bg-gray-900 p-4 rounded-lg">
    <div class="overflow-x-auto">
        {{-- Tabel data berita --}}
        <div class="overflow-x-auto">
            <table class="min-w-full border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden">
                <thead class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100">
                    <tr class="text-left">
                        <th class="p-3 border border-gray-300 dark:border-gray-700">No</th>
                        <th class="p-3 border border-gray-300 dark:border-gray-700">Gambar</th>
                        <th class="p-3 border border-gray-300 dark:border-gray-700">Judul</th>
                        <th class="p-3 border border-gray-300 dark:border-gray-700">Tanggal</th>
                        <th class="p-3 border border-gray-300 dark:border-gray-700">Lampiran</th>
                        <th class="p-3 border border-gray-300 dark:border-gray-700 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="text-gray-700 dark:text-gray-300">
                    @forelse ($news as $i => $item)
                        <tr class="border-t border-gray-200 dark:border-gray-700">
                            <td class="p-3">
    {{ ($news->firstItem() ?? 0) + $i }}
</td>
                            <td class="p-3">
                                @if ($item->image)
                                    <img src="{{ asset('storage/' . $item->image) }}"
                                        class="w-16 h-16 object-cover rounded-lg border shadow-sm cursor-pointer hover:opacity-80 transition"
                                        onclick="openImageModal('{{ asset('storage/' . $item->image) }}')">
                                @else
                                    <span class="text-gray-400 italic">-</span>
                                @endif
                            </td>
                            <td class="p-3 font-medium">{{ $item->title }}</td>
                            <td class="p-3">
                                {{ \Carbon\Carbon::parse($item->news_date)->translatedFormat('d F Y') }}
                            </td>
                            <td class="p-3 text-center">
                                @if ($item->attachment)
                                    <a href="{{ asset('storage/' . $item->attachment) }}" target="_blank"
                                        class="inline-flex items-center px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg shadow-sm transition">
                                        👁️ <span class="ml-1">Lihat</span>
                                    </a>
                                @else
                                    <span class="text-gray-400 italic">-</span>
                                @endif
                            </td>
                            <td class="p-3 text-center relative">
                                <div class="inline-block text-left">
                                    <button type="button"
                                        class="px-3 py-1.5 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition"
                                        onclick="toggleDropdown(event, {{ $i }})">
                                        ⋮
                                    </button>


                                    <div id="dropdown-{{ $i }}"
                                        class="hidden w-44 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg"
                                        style="position: fixed; display: none; z-index: 9999;">
                                        <a href="javascript:void(0)" onclick="showNewsDetail({{ $item->id }})"
                                            class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">📄 Detail</a>
                                        <a href="javascript:void(0)" onclick="openEditNewsModal({{ $item->id }})"
                                            class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">✏️ Edit</a>
                                        <a href="javascript:void(0)"
                                            onclick="openDeleteNewsModal('{{ route('admin.news.destroy', $item->id) }}', '{{ $item->title }}')"
                                            class="block px-4 py-2 hover:bg-red-100 dark:hover:bg-red-700 text-red-600 dark:text-red-400">
                                            🗑️ Hapus
                                        </a>
                                    </div>

                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="p-4 text-center text-gray-500 dark:text-gray-400 italic">Belum ada
                                data berita</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            <!-- Wrapper tabel + bottom bar -->

        
    </div>

    <!-- Bottom info & pagination (kotak hijau kiri & merah kanan) -->
    <div class="mt-4 flex items-center justify-between">
        <!-- Info kiri (kotak hijau) -->
        <div class="text-sm text-gray-400">
            @if($news->total() > 0)
                Menampilkan <strong class="text-gray-200">{{ $news->firstItem() }} - {{ $news->lastItem() }}</strong>
                dari <strong class="text-gray-200">{{ $news->total() }}</strong> berita.
                • Halaman <strong class="text-gray-200">{{ $news->currentPage() }}</strong> dari <strong class="text-gray-200">{{ $news->lastPage() }}</strong>
            @else
                Belum ada data berita.
            @endif
        </div>

        <!-- Pagination kanan -->
<div class="flex justify-center md:justify-end mt-4">
    {{ $news->withQueryString()->links('vendor.pagination.custom') }}
</div>

    </div>
</div>


        </div>
    </div>

    {{-- Modal Hapus Berita --}}
    <div id="deleteModalNews"
        class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50 transition-opacity duration-300 ease-out">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div id="deleteModalContent"
                class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-md p-6 transform scale-95 opacity-0 transition-all duration-300 ease-out">

                {{-- Judul --}}
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4 text-center">
                    Konfirmasi Hapus
                </h3>

                {{-- Pesan --}}
                <p id="deleteMessageNews" class="text-gray-600 dark:text-gray-300 mb-6 text-center"></p>

                {{-- Tombol Aksi --}}
                <div class="flex justify-center space-x-3">
                    {{-- Tombol Batal --}}
                    <button type="button" onclick="closeDeleteNewsModal()"
                        class="flex items-center gap-2 px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 transition">
                        ❌ <span>Batal</span>
                    </button>

                    {{-- Tombol Hapus --}}
                    <form id="deleteFormNews" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                            class="flex items-center gap-2 px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white transition">
                            🗑️ <span>Hapus</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Edit Berita -->
    <div id="editNewsModal" class="fixed inset-0 z-50 hidden bg-black/50 backdrop-blur-sm overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen p-6">
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg w-full max-w-2xl p-6 relative">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-100">Edit Berita</h2>

                <form id="editNewsForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="edit_id" name="id">

                    <div class="grid gap-4">
                        <!-- Judul -->
                        <div>
                            <label class="block font-medium text-gray-700 dark:text-gray-200">Judul Berita</label>
                            <input type="text" id="edit_title" name="title"
                                class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white">
                        </div>

                        <!-- Tanggal -->
                        <div>
                            <label class="block font-medium text-gray-700 dark:text-gray-200">Tanggal Berita</label>
                            <input type="date" id="edit_news_date" name="news_date"
                                class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white">
                        </div>

                        <!-- Konten -->
                        <div>
                            <label class="block font-medium text-gray-700 dark:text-gray-200">Keterangan Berita</label>
                            <textarea id="edit_content" name="content" rows="4"
                                class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white"></textarea>
                        </div>

                        <!-- Gambar -->
                        <div>
                            <label class="block font-medium text-gray-700 dark:text-gray-200">Gambar Berita
                                (Opsional)</label>
                            <input type="file" id="edit_image" name="image"
                                class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white">
                            <div id="edit_image_preview" class="mt-2"></div>
                        </div>

                        <!-- Lampiran -->
                        <div>
                            <label class="block font-medium text-gray-700 dark:text-gray-200">Lampiran (Opsional)</label>
                            <input type="file" id="edit_attachment" name="attachment"
                                class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white">
                            <div id="edit_attachment_preview" class="mt-2 text-sm text-blue-500"></div>
                        </div>
                    </div>

                    <div class="mt-6 flex justify-end gap-3">
                        <button type="button" onclick="closeEditNewsModal()"
                            class="px-4 py-2 rounded-lg bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white">Batal</button>
                        <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white">💾
                            Simpan</button>
                    </div>
                </form>

                <button onclick="closeEditNewsModal()"
                    class="absolute top-3 right-3 text-gray-500 hover:text-gray-700">✖️</button>
            </div>
        </div>
    </div>

    <script>
        function openEditNewsModal(id) {
            fetch(`/admin/berita/${id}/edit`)
                .then(res => res.json())
                .then(data => {
                    // Isi data form
                    document.getElementById('edit_id').value = data.id;
                    document.getElementById('edit_title').value = data.title;
                    document.getElementById('edit_news_date').value = data.news_date;
                    document.getElementById('edit_content').value = data.content.replace(/<[^>]+>/g, '');

                    // Preview gambar lama
                    const imgPreview = document.getElementById('edit_image_preview');
                    if (data.image) {
                        imgPreview.innerHTML = `<img src="/storage/${data.image}" class="mt-2 w-32 rounded-lg shadow">`;
                    } else {
                        imgPreview.innerHTML = '<p class="text-sm text-gray-500">Tidak ada gambar</p>';
                    }

                    // Preview lampiran lama
                    const attPreview = document.getElementById('edit_attachment_preview');
                    if (data.attachment) {
                        const fileName = data.attachment.split('/').pop();
                        attPreview.innerHTML =
                            `<a href="/storage/${data.attachment}" target="_blank" class="underline">📎 ${fileName}</a>`;
                    } else {
                        attPreview.innerHTML = '<p class="text-sm text-gray-500">Tidak ada lampiran</p>';
                    }

                    // Simpan id
                    document.getElementById('editNewsForm').dataset.id = data.id;

                    // Tampilkan modal
                    document.getElementById('editNewsModal').classList.remove('hidden');
                })
                .catch(err => console.error(err));
        }

        function closeEditNewsModal() {
            document.getElementById('editNewsModal').classList.add('hidden');
        }

        // Handle submit AJAX
        document.getElementById('editNewsForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const id = this.dataset.id;
            const formData = new FormData(this);

            fetch(`/admin/berita/${id}/update`, {
                    method: 'POST',
                    body: formData,
                })
                .then(res => res.json())
                .then(data => {
                    closeEditNewsModal();

                    // Tampilkan toastr manual
                    const toast = document.createElement('div');
                    toast.className =
                        'fixed top-5 right-5 z-50 flex items-center w-auto max-w-sm p-4 mb-4 text-green-800 bg-green-100 border border-green-300 rounded-xl shadow-lg dark:text-green-200 dark:bg-green-900 dark:border-green-700 animate-slide-in';
                    toast.innerHTML = `
        <i class="fa-solid fa-circle-check mr-3 text-green-600 dark:text-green-400"></i>
        <span class="text-sm font-medium">${data.message}</span>
    `;
                    document.body.appendChild(toast);

                    // Auto-hide setelah 3 detik
                    setTimeout(() => toast.remove(), 10000);

                    location.reload(); // atau update tabel manual
                })
                .catch(err => {
                    console.error(err);
                    alert('❌ Gagal memperbarui berita!');
                });
        });
    </script>

    {{-- Modal Detail Berita --}}
    <div id="newsDetailModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 backdrop-blur-sm">
        <div class="bg-white dark:bg-gray-800 rounded-2xl w-full max-w-2xl p-6 relative shadow-2xl">
            <button class="absolute top-3 right-3 text-gray-400 hover:text-red-500 text-xl"
                onclick="closeNewsDetail()">✖</button>
            <h2 class="text-xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Detail Berita</h2>

            <div id="newsDetailContent" class="text-gray-700 dark:text-gray-300 space-y-3">
                <div class="flex justify-center">
                    <img id="detailImage" src="" class="w-64 h-64 object-cover rounded-lg shadow-md">
                </div>
                <p><strong>Judul:</strong> <span id="detailTitle"></span></p>
                <p><strong>Tanggal:</strong> <span id="detailDate"></span></p>
                <p><strong>Isi Berita:</strong></p>
                <div id="detailContent" class="border p-3 rounded-lg bg-gray-50 dark:bg-gray-900"></div>
                <p><strong>Lampiran:</strong> <a id="detailAttachment" href="#" target="_blank"
                        class="text-blue-600 dark:text-blue-400 underline">Lihat Lampiran</a></p>
            </div>
        </div>
    </div>

    {{-- Modal Zoom Gambar --}}
    <div id="imageModal" class="fixed inset-0 bg-black/70 backdrop-blur-sm hidden items-center justify-center z-50">
        <div class="relative">
            <img id="modalImage" src=""
                class="max-h-[80vh] max-w-[90vw] rounded-lg shadow-2xl border-4 border-white">
        </div>
    </div>

    {{-- Modal Tambah --}}
    <div id="newsModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50 overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen py-10">
            <div class="bg-white dark:bg-gray-800 rounded-2xl w-full max-w-2xl p-6 shadow-xl transition">

                <h3 class="text-xl font-semibold mb-4 text-blue-700 dark:text-blue-400">Tambah Berita</h3>
                <form action="{{ route('admin.news.store') }}" method="POST" enctype="multipart/form-data"
                    class="space-y-4">
                    @csrf
                    <div>
                        <label class="block font-medium text-gray-700 dark:text-gray-300">Judul Berita</label>
                        <input type="text" name="title"
                            class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 transition">
                    </div>
                    <div>
                        <label class="block font-medium text-gray-700 dark:text-gray-300">Tanggal Berita</label>
                        <input type="date" name="news_date"
                            class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 transition">
                    </div>
                    <div>
                        <label class="block font-medium text-gray-700 dark:text-gray-300">Gambar Berita</label>

                        <!-- PREVIEW GAMBAR -->
                        <div id="imagePreviewContainer" class="mb-2 hidden">
                            <img id="imagePreview"
                                class="w-full max-h-60 object-contain rounded-lg border border-gray-400 dark:border-gray-600"
                                alt="Preview Gambar">
                        </div>

                        <input type="file" name="image" id="imageInput" accept="image/*"
                            class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-100 focus:ring-2 focus:ring-blue-500 transition">
                    </div>

                    <div>
                        <label class="block font-medium text-gray-700 dark:text-gray-300">Keterangan Berita</label>
                        <textarea id="content" name="content" class="hidden"></textarea>
                    </div>
                    <div>
                        <label class="block font-medium text-gray-700 dark:text-gray-300">Lampiran (optional)</label>
                        <input type="file" name="attachment"
                            class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-100 focus:ring-2 focus:ring-blue-500 transition">
                    </div>

                    <div class="flex justify-end gap-3 pt-2">
                        <button type="button" id="closeModal"
                            class="px-4 py-2 bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 rounded-lg transition">
                            ❌ Batal
                        </button>
                        <button type="submit"
                            class="px-4 py-2 bg-blue-700 hover:bg-blue-800 text-white font-semibold rounded-lg shadow transition">
                            💾 Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- CKEditor 5 CDN (Classic Build lengkap) --}}
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>

    <script>
        // ----- Modal Detail Berita -----
        function showNewsDetail(id) {
            // tutup semua dropdown sebelum membuka modal
            document.querySelectorAll('[id^="dropdown-"]').forEach(el => {
                el.classList.add('hidden');
                el.style.display = 'none';
            });

            fetch(`/admin/berita/${id}/show`)
                .then(res => res.json())
                .then(data => {
                    document.getElementById('detailTitle').innerText = data.title;
                    document.getElementById('detailDate').innerText = new Date(data.news_date)
                        .toLocaleDateString('id-ID', {
                            day: 'numeric',
                            month: 'long',
                            year: 'numeric'
                        });
                    document.getElementById('detailContent').innerHTML = data.content || '-';
                    document.getElementById('detailImage').src = data.image ? `/storage/${data.image}` : '';

                    const attachEl = document.getElementById('detailAttachment');
                    if (data.attachment) {
                        attachEl.style.display = 'inline';
                        attachEl.href = `/storage/${data.attachment}`;
                        attachEl.innerText = 'Lihat Lampiran';
                    } else {
                        // tampilkan '-' jika tidak ada lampiran
                        attachEl.style.display = 'inline';
                        attachEl.removeAttribute('href');
                        attachEl.innerText = '-';
                        attachEl.classList.remove('text-blue-600', 'dark:text-blue-400', 'underline');
                        attachEl.classList.add('text-gray-400');
                    }

                    document.getElementById('newsDetailModal').classList.remove('hidden');
                    document.getElementById('newsDetailModal').classList.add('flex');
                })
                .catch(err => {
                    console.error(err);
                    alert('Gagal mengambil data detail berita.');
                });
        }

        function closeNewsDetail() {
            document.getElementById('newsDetailModal').classList.add('hidden');
            document.getElementById('newsDetailModal').classList.remove('flex');
        }
    </script>

    <script>
        const modal = document.getElementById('newsModal');
        const addBtn = document.getElementById('addNewsBtn');
        const closeBtn = document.getElementById('closeModal');
        let ckeditorInstance;

        addBtn.onclick = () => {
            modal.classList.remove('hidden');

            setTimeout(() => {
                if (!ckeditorInstance) {
                    ClassicEditor.create(document.querySelector('#content'), {
                            toolbar: [
                                'undo', 'redo', '|',
                                'heading', '|',
                                'bold', 'italic', 'underline', 'strikethrough', '|',
                                'link', 'blockQuote', '|',
                                'bulletedList', 'numberedList', 'outdent', 'indent', '|',
                                'alignment', '|',
                                'insertTable'
                            ],
                            alignment: {
                                options: ['left', 'center', 'right', 'justify']
                            },
                            heading: {
                                options: [{
                                        model: 'paragraph',
                                        title: 'Paragraph',
                                        class: 'ck-heading_paragraph'
                                    },
                                    {
                                        model: 'heading1',
                                        view: 'h1',
                                        title: 'Heading 1',
                                        class: 'ck-heading_heading1'
                                    },
                                    {
                                        model: 'heading2',
                                        view: 'h2',
                                        title: 'Heading 2',
                                        class: 'ck-heading_heading2'
                                    },
                                    {
                                        model: 'heading3',
                                        view: 'h3',
                                        title: 'Heading 3',
                                        class: 'ck-heading_heading3'
                                    }
                                ]
                            }
                        })
                        .then(editor => {
                            ckeditorInstance = editor;
                            // styling biar enak di dark mode dan bullet gak keluar
                            editor.editing.view.change(writer => {
                                writer.setStyle({
                                    'min-height': '230px',
                                    'color': '#f9fafb',
                                    'background-color': '#1e293b',
                                    'padding': '12px',
                                    'border-radius': '8px',
                                    'font-size': '15px',
                                    'line-height': '1.6',
                                    'overflow-wrap': 'break-word',
                                    'list-style-position': 'inside',
                                    'margin-left': '0',
                                }, editor.editing.view.document.getRoot());
                            });
                        })
                        .catch(error => console.error(error));
                }
            }, 150);
        };

        closeBtn.onclick = () => {
            modal.classList.add('hidden');
            if (ckeditorInstance) {
                ckeditorInstance.destroy()
                    .then(() => ckeditorInstance = null)
                    .catch(err => console.warn('Editor destroy error:', err));
            }
        };

        // === PREVIEW GAMBAR ===
        const imageInput = document.getElementById('imageInput');
        const imagePreviewContainer = document.getElementById('imagePreviewContainer');
        const imagePreview = document.getElementById('imagePreview');

        imageInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    imagePreview.src = event.target.result;
                    imagePreviewContainer.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            } else {
                imagePreview.src = '';
                imagePreviewContainer.classList.add('hidden');
            }
        });
    </script>
    {{-- Script --}}
    <script>
        // modal image zoom (tetap seperti sebelumnya)
        function openImageModal(src) {
            const modal = document.getElementById('imageModal');
            const modalImg = document.getElementById('modalImage');
            modalImg.src = src;
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        document.getElementById('imageModal').addEventListener('click', () => {
            const modal = document.getElementById('imageModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        });

        // Toggle dropdown yang diposisikan fixed sehingga tidak kepotong oleh overflow parent
        function toggleDropdown(e, index) {
            e.stopPropagation();

            // Tutup semua dropdown lain terlebih dahulu
            document.querySelectorAll('[id^="dropdown-"]').forEach(el => {
                if (el.id !== `dropdown-${index}`) {
                    el.classList.add('hidden');
                    el.style.display = 'none';
                }
            });

            const btn = e.currentTarget;
            const rect = btn.getBoundingClientRect();
            const dropdown = document.getElementById(`dropdown-${index}`);

            // Jika dropdown saat ini tersembunyi, tampilkan + atur posisi
            if (dropdown.classList.contains('hidden')) {
                dropdown.classList.remove('hidden');
                dropdown.style.display = 'block';
                dropdown.style.position = 'fixed'; // pastikan fixed
                dropdown.style.zIndex = 9999;

                // setelah tampilkan, ukur dimensinya
                const dw = dropdown.offsetWidth;
                const dh = dropdown.offsetHeight;

                // default posisi: di bawah tombol, rata kanan tombol
                let top = rect.bottom + 6; // sedikit jarak
                let left = rect.right - dw;

                // jika kebawah melebihi layar, buka ke atas
                if (top + dh > window.innerHeight) {
                    top = rect.top - dh - 6;
                }

                // pastikan tidak ke luar kanan layar
                if (left + dw > window.innerWidth) {
                    left = window.innerWidth - dw - 8;
                }
                if (left < 8) left = 8;

                dropdown.style.top = `${top}px`;
                dropdown.style.left = `${left}px`;
            } else {
                // sembunyikan
                dropdown.classList.add('hidden');
                dropdown.style.display = 'none';
            }
        }

        // Klik luar: tutup semua dropdown
        document.addEventListener('click', function(e) {
            // jika target bukan tombol dropdown atau bukan dropdown, tutup
            if (!e.target.closest('[id^="dropdown-"]') && !e.target.closest('button[onclick^="toggleDropdown"]')) {
                document.querySelectorAll('[id^="dropdown-"]').forEach(el => {
                    el.classList.add('hidden');
                    el.style.display = 'none';
                });
            }
        });

        // Modal Hapus Berita
        function openDeleteNewsModal(url, title) {
            // Tutup semua dropdown yang terbuka dulu
            document.querySelectorAll('[id^="dropdown-"]').forEach(el => el.style.display = 'none');

            // Baru tampilkan modal hapus
            const modal = document.getElementById('deleteModalNews');
            const content = document.getElementById('deleteModalContent');
            document.getElementById('deleteFormNews').action = url;
            document.getElementById('deleteMessageNews').innerText = `Yakin ingin menghapus berita "${title}"?`;

            modal.classList.remove('hidden');
            setTimeout(() => {
                content.classList.remove('scale-95', 'opacity-0');
                content.classList.add('scale-100', 'opacity-100');
            }, 10);
        }

        function closeDeleteNewsModal() {
            const modal = document.getElementById('deleteModalNews');
            const content = document.getElementById('deleteModalContent');
            content.classList.remove('scale-100', 'opacity-100');
            content.classList.add('scale-95', 'opacity-0');
            setTimeout(() => modal.classList.add('hidden'), 200);
        }

        // Auto hide toast setelah beberapa detik
        setTimeout(() => {
            document.querySelectorAll('#toast-success, #toast-error').forEach(el => {
                el.classList.remove('animate-slide-in');
                el.classList.add('animate-slide-out');
                setTimeout(() => el.remove(), 400); // hapus setelah animasi selesai
            });
        }, 5000); // 5 detik
    </script>
    <script>
        function openEditNewsModal(id) {
            // Tutup semua dropdown biar gak nongol kayak di screenshot
            document.querySelectorAll('[id^="dropdown-"]').forEach(el => el.style.display = 'none');

            fetch(`/admin/berita/${id}/edit`)
                .then(res => res.json())
                .then(data => {
                    // Isi data form
                    document.getElementById('edit_id').value = data.id;
                    document.getElementById('edit_title').value = data.title;
                    document.getElementById('edit_news_date').value = data.news_date;
                    document.getElementById('edit_content').value = data.content.replace(/<[^>]+>/g, '');

                    // Preview gambar lama
                    const imgPreview = document.getElementById('edit_image_preview');
                    if (data.image) {
                        imgPreview.innerHTML = `
                    <p class="text-sm text-gray-500 mb-1">Gambar lama:</p>
                    <img src="/storage/${data.image}" class="w-32 rounded-lg shadow border">
                `;
                    } else {
                        imgPreview.innerHTML = `<p class="text-sm text-gray-500">Tidak ada gambar</p>`;
                    }

                    // Preview lampiran lama
                    const attPreview = document.getElementById('edit_attachment_preview');
                    if (data.attachment) {
                        const fileName = data.attachment.split('/').pop();
                        attPreview.innerHTML = `
                    <p class="text-sm text-gray-500 mb-1">Lampiran lama:</p>
                    <a href="/storage/${data.attachment}" target="_blank" class="underline text-blue-500">📎 ${fileName}</a>
                `;
                    } else {
                        attPreview.innerHTML = `<p class="text-sm text-gray-500">Tidak ada lampiran</p>`;
                    }

                    // Simpan id di form
                    document.getElementById('editNewsForm').dataset.id = data.id;

                    // Tampilkan modal
                    document.getElementById('editNewsModal').classList.remove('hidden');
                })
                .catch(err => console.error(err));
        }

        function closeEditNewsModal() {
            document.getElementById('editNewsModal').classList.add('hidden');
        }
    </script>
    <script>
        // Preview gambar baru
        document.getElementById('edit_image').addEventListener('change', function(e) {
            const preview = document.getElementById('edit_image_preview');
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(ev) {
                    preview.innerHTML = `
                <p class="text-sm text-gray-500 mb-1">Gambar baru:</p>
                <img src="${ev.target.result}" class="w-32 rounded-lg shadow border">
            `;
                };
                reader.readAsDataURL(file);
            }
        });

        // Preview lampiran baru
        document.getElementById('edit_attachment').addEventListener('change', function(e) {
            const preview = document.getElementById('edit_attachment_preview');
            const file = e.target.files[0];
            if (file) {
                preview.innerHTML = `
            <p class="text-sm text-gray-500 mb-1">Lampiran baru:</p>
            <p class="text-blue-600">${file.name}</p>
        `;
            }
        });
    </script>


@endsection