@extends('layouts.admin')

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

@section('content')
    <div class="bg-white text-white dark:bg-gray-900 p-6 rounded-xl shadow transition duration-300">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Manajemen Galeri Sekolah</h2>
            <button id="addGalleryBtn"
                class="px-4 py-2 bg-blue-700 hover:bg-blue-800 text-white rounded-lg font-semibold shadow-md transition duration-200 hover:scale-105">
                ➕ Tambah Gambar
            </button>
        </div>

        {{-- Toast Notification --}}
        @if (session('success'))
            <div id="toast-success"
                class="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">
                <i class="fa-solid fa-circle-check mr-3 text-green-600 dark:text-green-400"></i>
                <span class="text-sm font-medium">{{ session('success') }}</span>
            </div>
        @endif

        {{-- Tabel Data --}}
        <div class="overflow-x-auto" id="gallery-table">
            @include('admin.galeri.table', ['galleries' => $galleries])
        </div>

        {{-- Modal Edit Galeri --}}
        <div id="editGalleryModal" 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-lg p-6 relative">
                    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-100">Edit Gambar Galeri</h2>

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

                        <div class="space-y-4">
                            <div>
                                <label class="block font-medium text-gray-700 dark:text-gray-200">Judul Gambar</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>

                            <div>
                                <label class="block font-medium text-gray-700 dark:text-gray-200">Gambar Saat Ini</label>
                                <div id="old_image_preview" class="mt-2"></div>

                                <label class="block mt-4 font-medium text-gray-700 dark:text-gray-200">Ubah Gambar
                                    (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="new_image_preview" class="mt-2"></div>
                            </div>
                        </div>

                        <div class="mt-6 flex justify-end gap-3">
                            <button type="button" onclick="closeEditGalleryModal()"
                                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="closeEditGalleryModal()"
                        class="absolute top-3 right-3 text-gray-500 hover:text-gray-700">✖️</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Tambah Galeri --}}
    <div id="galleryModal" 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 p-6">
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg w-full max-w-lg p-6 relative">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-100">Tambah Gambar Galeri</h2>

                <form action="{{ route('admin.gallery.store') }}" method="POST" enctype="multipart/form-data"
                    class="space-y-4">
                    @csrf
                    <div>
                        <label class="block font-medium text-gray-700 dark:text-gray-200">Judul Gambar</label>
                        <input type="text" name="title" required
                            class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white">
                    </div>

                    <div>
                        <label class="block font-medium text-gray-700 dark:text-gray-200">Upload Gambar</label>
                        <input type="file" name="image" id="imageInput" accept="image/*" required
                            class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white">
                        <div id="previewContainer" class="mt-2 hidden">
                            <img id="previewImage" class="w-full max-h-60 object-contain rounded-lg border mt-2">
                        </div>
                    </div>

                    <div class="flex justify-end gap-3">
                        <button type="button" id="closeModal"
                            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 type="button" id="closeModalTop"
                    class="absolute top-3 right-3 text-gray-500 hover:text-gray-700">✖️</button>
            </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">
        <img id="modalImage" src="" class="max-h-[80vh] max-w-[90vw] rounded-lg shadow-2xl border-4 border-white">
    </div>

    <script>
        // Tambah data
        const modal = document.getElementById('galleryModal');
        document.getElementById('addGalleryBtn').onclick = () => {
            modal.classList.remove('hidden');
            modal.classList.add('show');
        };
        document.getElementById('closeModal').onclick = () => {
            modal.classList.add('hidden');
            modal.classList.remove('show');
        };
        document.getElementById('closeModalTop').onclick = () => modal.classList.add('hidden');

        modal.addEventListener('click', e => {
            if (e.target === modal) {
                modal.classList.add('hidden');
            }
        });

        // Preview gambar
        const input = document.getElementById('imageInput');
        const previewContainer = document.getElementById('previewContainer');
        const previewImage = document.getElementById('previewImage');

        input.addEventListener('change', e => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = ev => {
                    previewImage.src = ev.target.result;
                    previewContainer.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            }
        });

        // Zoom gambar
        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');
        });
    </script>

    <script>
        let currentGalleryId = null;

        function openDeleteGalleryModal(id, message) {
            currentGalleryId = id;
            document.getElementById('deleteMessageGallery').textContent = message;

            const modal = document.getElementById('deleteModalGallery');
            const content = document.getElementById('deleteModalGalleryContent');

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

        function closeDeleteGalleryModal() {
            const modal = document.getElementById('deleteModalGallery');
            const content = document.getElementById('deleteModalGalleryContent');

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

        document.getElementById('confirmDeleteGallery').addEventListener('click', function() {
            if (currentGalleryId) {
                const form = document.getElementById(`deleteFormGallery-${currentGalleryId}`);
                if (form) form.submit();
            }
        });
    </script>

    {{-- Animasi Modal --}}
    <style>
        #galleryModal.show {
            animation: fadeIn 0.3s ease-out forwards;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }
    </style>

    <script>
        // Open modal edit
        function openEditGalleryModal(id) {
            fetch(`/admin/galeri/${id}/edit`)
                .then(res => res.json())
                .then(data => {
                    document.getElementById('edit_id').value = data.id;
                    document.getElementById('edit_title').value = data.title;

                    const oldPreview = document.getElementById('old_image_preview');
                    oldPreview.innerHTML = `<img src="/storage/${data.image}" class="w-32 rounded-lg shadow border">`;

                    document.getElementById('editGalleryModal').classList.remove('hidden');
                });
        }

        function closeEditGalleryModal() {
            document.getElementById('editGalleryModal').classList.add('hidden');
        }

        // Preview gambar baru
        document.getElementById('edit_image').addEventListener('change', e => {
            const file = e.target.files[0];
            const preview = document.getElementById('new_image_preview');
            if (file) {
                const reader = new FileReader();
                reader.onload = ev => preview.innerHTML =
                    `<img src="${ev.target.result}" class="w-32 rounded-lg shadow border">`;
                reader.readAsDataURL(file);
            } else {
                preview.innerHTML = '';
            }
        });

        // Handle submit update
        document.getElementById('editGalleryForm').addEventListener('submit', e => {
            e.preventDefault();
            const id = document.getElementById('edit_id').value;
            const formData = new FormData(e.target);

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

                    // tampilkan toast sukses
                    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);

                    setTimeout(() => toast.remove(), 4000);
                    setTimeout(() => location.reload(), 500); // reload biar data update
                });
        });
    </script>
    {{-- Script AJAX Pagination --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).on('click', '#gallery-table .pagination a', function(e) {
            e.preventDefault();
            let url = $(this).attr('href');

            $.ajax({
                url: url,
                type: 'GET',
                beforeSend: function() {
                    $('#gallery-table').html(
                        '<div class="p-6 text-center text-gray-500">⏳ Memuat data...</div>');
                },
                success: function(response) {
                    $('#gallery-table').html(response);
                },
                error: function() {
                    alert('Gagal memuat data!');
                }
            });
        });
    </script>
@endsection