@extends('layouts.admin')

@section('title', 'Prestasi 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 Prestasi Sekolah</h2>
            <button id="addPrestasiBtn"
                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 Prestasi
            </button>
        </div>

        {{-- Toast Notification (server-side flash) --}}
        @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>
            <script>
                setTimeout(() => {
                    const toast = document.getElementById('toast-success');
                    if (toast) toast.remove();
                }, 5000); // hilang setelah 5 detik
            </script>
        @endif


        {{-- Include tabel --}}
        @include('admin.prestasi.table', ['prestasis' => $prestasis])
    </div>

    {{-- Modal Tambah Prestasi --}}
    <div id="prestasiModal" 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 Prestasi</h2>

                <form action="{{ route('admin.prestasi.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 Prestasi</label>
                        <input type="text" name="judul" 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">Keterangan Prestasi</label>
                        <textarea name="keterangan" rows="3" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white"></textarea>
                    </div>

                    <div>
                        <label class="block font-medium text-gray-700 dark:text-gray-200">Upload Gambar</label>
                        <input type="file" name="gambar" id="add_gambar_input" accept="image/*" required
                            class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white">
                        <div id="add_preview_container" class="mt-2 hidden">
                            <img id="add_preview_image" 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="closePrestasiModal"
                            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="closePrestasiModalTop"
                    class="absolute top-3 right-3 text-gray-500 hover:text-gray-700">✖️</button>
            </div>
        </div>
    </div>

    {{-- Modal Edit Prestasi --}}
    <div id="editPrestasiModal" 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 Prestasi</h2>

                <form id="editPrestasiForm" 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 Prestasi</label>
                            <input type="text" id="edit_judul" name="judul"
                                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">Keterangan Prestasi</label>
                            <textarea id="edit_keterangan" name="keterangan" rows="3"
                                class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white"></textarea>
                        </div>

                        <div>
                            <label class="block font-medium text-gray-700 dark:text-gray-200">Gambar Saat Ini</label>
                            <img id="edit_preview" class="hidden w-32 h-32 object-cover rounded-lg mt-2"
                                alt="Preview Gambar">

                            <label class="block mt-4 font-medium text-gray-700 dark:text-gray-200">Ubah Gambar
                                (opsional)</label>
                            <input type="file" id="edit_gambar_input" name="gambar"
                                class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white">
                            <div id="edit_new_preview" class="mt-2"></div>
                        </div>
                    </div>

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

    {{-- Modal Hapus Prestasi --}}
    <div id="deleteModalPrestasi"
        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="deleteModalPrestasiContent"
                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="deleteMessagePrestasi" 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="closeDeletePrestasiModal()"
                        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 --}}
                    <button id="confirmDeletePrestasi" type="button"
                        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>
                </div>
            </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>

    {{-- Scripts --}}
    <script>
        // -- Modal Add --
        const prestasiModal = document.getElementById('prestasiModal');
        document.getElementById('addPrestasiBtn').onclick = () => prestasiModal.classList.remove('hidden');
        document.getElementById('closePrestasiModal').onclick = () => prestasiModal.classList.add('hidden');
        document.getElementById('closePrestasiModalTop').onclick = () => prestasiModal.classList.add('hidden');
        prestasiModal.addEventListener('click', e => {
            if (e.target === prestasiModal) prestasiModal.classList.add('hidden');
        });

        // -- Preview Add Image --
        const addInput = document.getElementById('add_gambar_input');
        const addPreviewContainer = document.getElementById('add_preview_container');
        const addPreviewImage = document.getElementById('add_preview_image');

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

        // -- Toast auto hide (5s) for server flash --
        document.addEventListener('DOMContentLoaded', () => {
            const toast = document.getElementById('toast-success');
            if (toast) {
                setTimeout(() => {
                    // fade & remove
                    toast.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
                    toast.style.opacity = '0';
                    toast.style.transform = 'translateY(-10px)';
                    setTimeout(() => toast.remove(), 450);
                }, 5000); // 5 detik
            }
        });

        // -- Image zoom modal (klik gambar di tabel) --
        const imageModal = document.getElementById('imageModal');
        const modalImage = document.getElementById('modalImage');

        document.querySelectorAll('.preview-click').forEach(img => {
            img.addEventListener('click', e => {
                const src = e.currentTarget.getAttribute('data-src') || e.currentTarget.src;
                modalImage.src = src;
                imageModal.classList.remove('hidden');
                imageModal.classList.add('flex');
            });
        });

        // Click outside image to close
        imageModal.addEventListener('click', e => {
            if (e.target === imageModal) {
                imageModal.classList.add('hidden');
                imageModal.classList.remove('flex');
                modalImage.src = '';
            }
        });

        // -- Delete modal logic --
        let currentDeleteId = null;

        function openDeletePrestasiModal(id, message) {
            currentDeleteId = id;
            document.getElementById('deleteMessagePrestasi').textContent = message;

            const modal = document.getElementById('deleteModalPrestasi');
            const content = document.getElementById('deleteModalPrestasiContent');

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

        function closeDeletePrestasiModal() {
            const modal = document.getElementById('deleteModalPrestasi');
            const content = document.getElementById('deleteModalPrestasiContent');

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

        document.getElementById('confirmDeletePrestasi').addEventListener('click', function() {
            if (currentDeleteId) {
                const form = document.getElementById(`deleteFormPrestasi-${currentDeleteId}`);
                if (form) form.submit();
            }
        });

        // -- Edit modal logic (fetch data, preview, submit via AJAX) --

        function openEditPrestasiModal(id) {
            fetch(`/admin/prestasi/${id}/edit`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Response not OK');
                    }
                    return response.json();
                })
                .then(data => {
                    document.getElementById('edit_id').value = id;
                    document.getElementById('edit_judul').value = data.judul;
                    document.getElementById('edit_keterangan').value = data.keterangan || '';

                    const previewImg = document.getElementById('edit_preview');
                    if (data.gambar) {
                        previewImg.src = `/storage/${data.gambar}`;
                        previewImg.classList.remove('hidden');
                    } else {
                        previewImg.classList.add('hidden');
                    }

                    document.getElementById('editPrestasiModal').classList.remove('hidden');
                })
                .catch(error => {
                    console.error(error);
                    alert('Gagal mengambil data. Coba lagi.');
                });
        }

        function closeEditPrestasiModal() {
            document.getElementById('editPrestasiModal').classList.add('hidden');
            // reset new preview
            document.getElementById('edit_new_preview').innerHTML = '';
            document.getElementById('edit_gambar_input').value = '';
        }

        // Preview new image on edit
        const editInput = document.getElementById('edit_gambar_input');
        if (editInput) {
            editInput.addEventListener('change', e => {
                const file = e.target.files[0];
                const preview = document.getElementById('edit_new_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 = '';
                }
            });
        }

        // Submit edit form via AJAX
        document.getElementById('editPrestasiForm').addEventListener('submit', e => {
            e.preventDefault();
            const id = document.getElementById('edit_id').value;
            const formData = new FormData(e.target);

            fetch(`/admin/prestasi/${id}/update`, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    closeEditPrestasiModal();

                    // tampilkan toast sukses sementara
                    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';
                    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.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
                        toast.style.opacity = '0';
                        toast.style.transform = 'translateY(-10px)';
                        setTimeout(() => toast.remove(), 450);
                    }, 5000);

                    // reload supaya data tabel terupdate (paket sederhana)
                    setTimeout(() => location.reload(), 600);
                })
                .catch(err => {
                    alert('Gagal menyimpan perubahan. Periksa input dan coba lagi.');
                });
        });

        // Optional: rebind preview-click listeners after AJAX pagination (if you implement ajax pagination)

        // Preview gambar Tambah
        document.getElementById('gambarInput').addEventListener('change', e => {
            const file = e.target.files[0];
            const preview = document.getElementById('previewContainer');
            const img = document.getElementById('previewImage');

            if (file) {
                const reader = new FileReader();
                reader.onload = ev => {
                    img.src = ev.target.result;
                    preview.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            } else {
                preview.classList.add('hidden');
            }
        });
        document.getElementById('edit_gambar').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const previewImg = document.getElementById('edit_preview');
            if (file) {
                previewImg.src = URL.createObjectURL(file);
                previewImg.classList.remove('hidden');
            }
        });

        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>

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

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

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