@extends('layouts.admin')

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

@section('content')
    <div class="p-6 max-w-2xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow">
        <h2 class="text-2xl font-bold text-blue-700 dark:text-blue-400 mb-6">Detail Pesan</h2>

        <div class="space-y-4 text-gray-800 dark:text-gray-200">
            <p><strong>Nama:</strong> {{ $message->nama }}</p>
            <p><strong>Email:</strong> {{ $message->email }}</p>
            <p><strong>Dikirim:</strong> {{ $message->created_at->format('d M Y H:i') }}</p>
            <p><strong>Isi Pesan:</strong></p>
            <div
                class="border border-gray-300 dark:border-gray-600 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-100 whitespace-pre-line pt-0 mt-0">
                {{ trim($message->pesan) }}</div>
        </div>

        <div class="mt-6 flex justify-between">
            <a href="{{ route('admin.messages.index') }}"
                class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-500 transition">
                ← Kembali
            </a>

            <button type="button" onclick="openDeleteMessageModal()"
                class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 dark:hover:bg-red-500 transition">
                Hapus
            </button>
        </div>
    </div>

    {{-- 🔥 Modal Konfirmasi Hapus Pesan --}}
    <div id="deleteModalMessage"
        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="deleteModalMessageContent"
                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 Pesan
                </h3>

                {{-- Pesan --}}
                <p class="text-gray-600 dark:text-gray-300 mb-6 text-center">
                    Apakah Anda yakin ingin menghapus pesan dari <strong>{{ $message->nama }}</strong>?
                </p>

                {{-- Tombol Aksi --}}
                <div class="flex justify-center space-x-3">
                    {{-- Tombol Batal --}}
                    <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>

                    {{-- Tombol Hapus --}}
                    <form id="deleteMessageForm" action="{{ route('admin.messages.destroy', $message->id) }}"
                        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>

    {{-- 🔧 Script Modal --}}
    <script>
        const modal = document.getElementById('deleteModalMessage');
        const modalContent = document.getElementById('deleteModalMessageContent');

        function openDeleteMessageModal() {
            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);
        }
    </script>
@endsection