@extends('admin.layout.main')

@section('admin')
<div class="flex flex-col h-full overflow-auto">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Contact Message Details</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Message ID: {{ $contact->id }}</p>
        </div>
        <div class="flex items-center space-x-3">
            <a href="{{ route('admin.contacts.index') }}" 
               class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-colors flex items-center">
                <i class="fas fa-arrow-left mr-2"></i>
                Back to List
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Message Content -->
            <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                    <i class="fas fa-envelope mr-2 text-blue-500"></i>
                    Message Content
                </h3>
                <div class="prose dark:prose-invert max-w-none">
                    <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6">
                        <p class="text-gray-700 dark:text-gray-300 whitespace-pre-line">{{ $contact->message }}</p>
                    </div>
                </div>
            </div>

            <!-- Service Information -->
            @if($contact->service)
            <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                    <i class="fas fa-concierge-bell mr-2 text-green-500"></i>
                    Service Information
                </h3>
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center mr-4">
                        <i class="fas fa-cog text-green-500 dark:text-green-400"></i>
                    </div>
                    <div>
                        <p class="text-lg font-medium text-gray-900 dark:text-white">{{ $contact->service }}</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Requested Service</p>
                    </div>
                </div>
            </div>
            @endif
        </div>

        <!-- Right Column -->
        <div class="space-y-6">
            <!-- Contact Information -->
            <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                    <i class="fas fa-user-circle mr-2 text-purple-500"></i>
                    Contact Information
                </h3>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Full Name</label>
                        <p class="text-lg font-medium text-gray-900 dark:text-white">{{ $contact->name }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Email Address</label>
                        <p class="text-gray-900 dark:text-white">
                            <a href="mailto:{{ $contact->email }}" class="hover:text-blue-600 dark:hover:text-blue-400">
                                {{ $contact->email }}
                            </a>
                        </p>
                    </div>
                    @if($contact->phone)
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Phone Number</label>
                        <p class="text-gray-900 dark:text-white">
                            <a href="tel:{{ $contact->phone }}" class="hover:text-blue-600 dark:hover:text-blue-400">
                                {{ $contact->phone }}
                            </a>
                        </p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Message Details -->
            <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                    <i class="fas fa-info-circle mr-2 text-orange-500"></i>
                    Message Details
                </h3>
                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600 dark:text-gray-400">Status:</span>
                        @php
                            $statusColors = [
                                'new' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
                                'read' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
                                'responded' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
                                'archived' => 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300'
                            ];
                            $statusLabels = [
                                'new' => 'Unread',
                                'read' => 'Read',
                                'responded' => 'Responded',
                                'archived' => 'Archived'
                            ];
                        @endphp
                        <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $statusColors[$contact->status] }}">
                            {{ $statusLabels[$contact->status] }}
                        </span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600 dark:text-gray-400">Submitted:</span>
                        <span class="text-gray-900 dark:text-white">{{ $contact->created_at->format('M j, Y g:i A') }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600 dark:text-gray-400">Last Updated:</span>
                        <span class="text-gray-900 dark:text-white">{{ $contact->updated_at->format('M j, Y g:i A') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-xl max-w-md w-full mx-4 transform transition-all">
        <div class="p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-exclamation-triangle text-red-500 dark:text-red-400"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Confirm Deletion</h3>
                </div>
                <button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors" onclick="closeModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="mb-6">
                <p class="text-gray-600 dark:text-gray-300">
                    Are you sure you want to delete this message from 
                    <span id="contactName" class="font-semibold text-gray-900 dark:text-white"></span>?
                </p>
                <p class="text-sm text-red-500 dark:text-red-400 mt-2 flex items-center">
                    <i class="fas fa-info-circle mr-1"></i>
                    This action cannot be undone.
                </p>
            </div>
            
            <div class="flex justify-end space-x-3">
                <button type="button" 
                        class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                        onclick="closeModal()">
                    Cancel
                </button>
                <form id="deleteForm" method="POST" class="inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" 
                            class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors flex items-center">
                        <i class="fas fa-trash mr-2"></i>
                        Delete Message
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function openDeleteModal(contactId, contactName) {
        const modal = document.getElementById('deleteModal');
        const contactNameElement = document.getElementById('contactName');
        const deleteForm = document.getElementById('deleteForm');
        
        contactNameElement.textContent = contactName;
        deleteForm.action = `/admin/panel/contacts/${contactId}`;
        
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeModal() {
        const modal = document.getElementById('deleteModal');
        modal.classList.add('hidden');
        document.body.style.overflow = 'auto';
    }

    // Close modal when clicking outside
    document.getElementById('deleteModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeModal();
        }
    });

    // Close modal with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeModal();
        }
    });
</script>
@endsection