@extends('layouts.admin')

@section('title', 'Pesan Masuk')

@section('content')
    <div class="bg-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 flex items-center gap-2">
                📩 Pesan Masuk
            </h2>
            <!-- Tombol Hapus Semua Pesan -->
            <button type="button" onclick="openDeleteAllModal()"
                class="bg-red-600 hover:bg-red-700 text-white font-semibold px-4 py-2 rounded-lg shadow transition transform hover:scale-105">
                🗑️ Hapus Semua Pesan
            </button>
        </div>

        {{-- ✅ Notifikasi (toast style) --}}
        @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);
            </script>
        @endif

        {{-- 🔹 Tabel Pesan --}}
        <div
            class="overflow-x-auto bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow">
            <table class="min-w-full text-sm text-gray-700 dark:text-gray-200">
                <thead class="bg-blue-700 dark:bg-blue-800 text-white">
                    <tr>
                        <th class="py-3 px-4 text-left font-semibold">#</th>
                        <th class="py-3 px-4 text-left font-semibold">Nama</th>
                        <th class="py-3 px-4 text-left font-semibold">Email</th>
                        <th class="py-3 px-4 text-left font-semibold">Tanggal</th>
                        <th class="py-3 px-4 text-center font-semibold">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($messages as $msg)
                        <tr
                            class="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                            <td class="py-3 px-4">{{ $loop->iteration }}</td>
                            <td class="py-3 px-4 font-medium text-gray-900 dark:text-gray-100">{{ $msg->nama }}</td>
                            <td class="py-3 px-4">{{ $msg->email }}</td>
                            <td class="py-3 px-4">{{ $msg->created_at->format('d M Y H:i') }}</td>
                            <td class="py-3 px-4 text-center space-x-2">
                                <a href="{{ route('admin.messages.show', $msg->id) }}"
                                    class="inline-flex items-center gap-1 px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg shadow transition transform hover:scale-105">
                                    👁️ <span>Lihat</span>
                                </a>
                                <form action="{{ route('admin.messages.destroy', $msg->id) }}" method="POST"
                                    class="inline delete-message-form">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" onclick="openDeleteMessageModal({{ $msg->id }})"
                                        class="inline-flex items-center gap-1 px-3 py-1 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg shadow transition transform hover:scale-105">
                                        🗑️ <span>Hapus</span>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="py-6 text-center text-gray-500 dark:text-gray-400">
                                Belum ada pesan masuk
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- 🔸 Pagination --}}
        <div class="mt-6">
            {{ $messages->links() }}
        </div>
    </div>

    <!-- Modal Konfirmasi -->
    <div id="deleteAllModal" class="fixed inset-0 bg-black/50 hidden flex items-center justify-center z-50">
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-96 text-center">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-3">
                Yakin hapus semua pesan?
            </h2>
            <p class="text-gray-600 dark:text-gray-300 mb-5">
                Tindakan ini akan menghapus semua pesan secara permanen dari sistem.
            </p>
            <div class="flex justify-center gap-3">
                <button onclick="closeDeleteAllModal()"
                    class="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-500">
                    Batal
                </button>

                <form action="{{ route('admin.messages.destroyAll') }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg shadow">
                        Ya, Hapus Semua
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Script Modal -->
    <script>
        function openDeleteAllModal() {
            document.getElementById('deleteAllModal').classList.remove('hidden');
        }

        function closeDeleteAllModal() {
            document.getElementById('deleteAllModal').classList.add('hidden');
        }
    </script>

    {{-- 🔥 Modal Konfirmasi Hapus Pesan --}}
    <div id="deleteMessageModal"
        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="deleteMessageModalContent"
                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="deleteMessageText" class="text-gray-600 dark:text-gray-300 mb-6 text-center">
                    Apakah Anda yakin ingin menghapus pesan ini?
                </p>

                {{-- Tombol Aksi --}}
                <div class="flex justify-center space-x-3">
                    <button type="button" onclick="closeDeleteMessageModal()"
                        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>

                    <button id="confirmDeleteMessage" 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>

    <script>
        let formToDelete = null;
        const modal = document.getElementById('deleteMessageModal');
        const modalContent = document.getElementById('deleteMessageModalContent');

        function openDeleteMessageModal(id) {
            // simpan form yang akan dihapus
            formToDelete = document.querySelector(
                `form.delete-message-form button[onclick="openDeleteMessageModal(${id})"]`).closest('form');

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

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

        document.getElementById('confirmDeleteMessage').addEventListener('click', function() {
            if (formToDelete) {
                formToDelete.submit();
            }
        });
    </script>
    {{-- Animasi toast --}}
    <style>
        @keyframes slide-in {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-slide-in {
            animation: slide-in 0.3s ease-out forwards;
        }
    </style>

    <script>
        // auto fade out toast
        document.addEventListener('DOMContentLoaded', () => {
            const toast = document.getElementById('toast-success');
            if (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);
            }
        });
    </script>
@endsection