@extends('layouts.admin')

@section('title', 'View Contact Message')
@section('page-title', 'Contact Message Details')

@section('content')

<div class="mb-4">
    <a href="{{ route('admin.contacts.index') }}" class="text-blue-600 hover:text-blue-800">
        <i class="fas fa-arrow-left mr-2"></i> Back to Messages
    </a>
</div>

<div class="bg-white rounded-lg shadow-sm overflow-hidden">
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-8 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold mb-2">{{ $contact->subject }}</h2>
                <div class="flex items-center space-x-4 text-blue-100">
                    <span><i class="fas fa-clock mr-2"></i>{{ $contact->created_at->format('M d, Y \a\t h:i A')
                        }}</span>
                    @if(!$contact->is_read)
                    <span class="px-2 py-1 bg-yellow-400 text-yellow-900 text-xs rounded-full font-semibold">
                        <i class="fas fa-envelope mr-1"></i> New
                    </span>
                    @endif
                </div>
            </div>
            <div class="bg-white bg-opacity-20 p-4 rounded-full">
                <i class="fas fa-envelope text-4xl"></i>
            </div>
        </div>
    </div>

    <!-- Sender Information -->
    <div class="px-6 py-6 border-b border-gray-200 bg-gray-50">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Sender Information</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-500 mb-1">Name</label>
                <p class="text-gray-900 font-medium"><i class="fas fa-user text-gray-400 mr-2"></i>{{ $contact->name }}
                </p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-500 mb-1">Email</label>
                <p class="text-gray-900">
                    <i class="fas fa-envelope text-gray-400 mr-2"></i>
                    <a href="mailto:{{ $contact->email }}" class="text-blue-600 hover:underline">{{ $contact->email
                        }}</a>
                </p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-500 mb-1">Phone</label>
                <p class="text-gray-900">
                    <i class="fas fa-phone text-gray-400 mr-2"></i>
                    @if($contact->phone)
                    <a href="tel:{{ $contact->phone }}" class="text-blue-600 hover:underline">{{ $contact->phone }}</a>
                    @else
                    <span class="text-gray-400">Not provided</span>
                    @endif
                </p>
            </div>
        </div>
    </div>

    <!-- Message Content -->
    <div class="px-6 py-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Message</h3>
        <div class="bg-gray-50 rounded-lg p-6">
            <p class="text-gray-700 whitespace-pre-line leading-relaxed">{{ $contact->message }}</p>
        </div>
    </div>

    <!-- Actions -->
    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-between items-center">
        <div class="flex space-x-3">
            <a href="mailto:{{ $contact->email }}?subject=Re: {{ $contact->subject }}"
                class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                <i class="fas fa-reply mr-2"></i> Reply via Email
            </a>
            @if($contact->phone)
            <a href="tel:{{ $contact->phone }}"
                class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
                <i class="fas fa-phone mr-2"></i> Call
            </a>
            @endif
        </div>

        <form action="{{ route('admin.contacts.destroy', $contact) }}" method="POST"
            onsubmit="return confirm('Are you sure you want to delete this message?')">
            @csrf
            @method('DELETE')
            <button type="submit"
                class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
                <i class="fas fa-trash mr-2"></i> Delete Message
            </button>
        </form>
    </div>
</div>

@endsection