@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'View Contact Message')

@section('content')
<div class="flex justify-between items-center mb-4 flex-wrap gap-2">
    <h3 class="text-2xl font-semibold">Contact Message from {{ $contactMessage->name }}</h3>
    <div>
        <a href="{{ route('admin.contact-message.index') }}"
           class="btn btn-primary">
            <i class="fas fa-arrow-left"></i> Back to Messages
        </a>
    </div>
</div>

<div class="flex flex-col gap-6">
    <!-- Message Details -->
    <div class="bg-white shadow rounded-lg">
        <div class="flex justify-between items-center border-b p-5">
            <h5 class="text-lg font-semibold">Message Details</h5>
            @php
                $statusConfig = [
                    'unread' => ['class' => 'red-500', 'icon' => 'envelope'],
                    'read' => ['class' => 'blue-500', 'icon' => 'envelope-open'],
                    'replied' => ['class' => 'green-500', 'icon' => 'reply'],
                    'archived' => ['class' => 'gray-400', 'icon' => 'archive'],
                ];
                $config = $statusConfig[$contactMessage->status] ?? $statusConfig['unread'];
            @endphp
            <span class="px-2 py-1 rounded bg-{{ $config['class'] }} text-white flex items-center gap-1">
                <i class="fas fa-{{ $config['icon'] }}"></i>
                {{ ucfirst($contactMessage->status) }}
            </span>
        </div>
        <div class="p-5 overflow-x-auto">
            <table class="w-full table-auto border border-gray-200">
                <tr class="border-b border-gray-200">
                    <th class="text-left w-48 px-3 py-2">Name</th>
                    <td class="px-3 py-2">{{ $contactMessage->name }}</td>
                </tr>
                <tr class="border-b border-gray-200">
                    <th class="text-left px-3 py-2">Email</th>
                    <td class="px-3 py-2">
                        <a href="mailto:{{ $contactMessage->email }}" class="text-blue-600 underline">
                            {{ $contactMessage->email }}
                        </a>
                    </td>
                </tr>
                @if ($contactMessage->phone)
                <tr class="border-b border-gray-200">
                    <th class="text-left px-3 py-2">Phone</th>
                    <td class="px-3 py-2">
                        <a href="tel:{{ $contactMessage->phone }}" class="text-blue-600 underline">
                            {{ $contactMessage->phone }}
                        </a>
                    </td>
                </tr>
                @endif
                @if ($contactMessage->company)
                <tr class="border-b border-gray-200">
                    <th class="text-left px-3 py-2">Company</th>
                    <td class="px-3 py-2">{{ $contactMessage->company }}</td>
                </tr>
                @endif
                <tr class="border-b border-gray-200">
                    <th class="text-left px-3 py-2">IP Address</th>
                    <td class="px-3 py-2">{{ $contactMessage->ip_address ?? 'N/A' }}</td>
                </tr>
                <tr class="border-b border-gray-200">
                    <th class="text-left px-3 py-2">User Agent</th>
                    <td class="px-3 py-2 text-gray-500 text-sm">{{ $contactMessage->user_agent ?? 'N/A' }}</td>
                </tr>
                <tr class="border-b border-gray-200">
                    <th class="text-left px-3 py-2">Received At</th>
                    <td class="px-3 py-2">{{ customDateTimeFormate($contactMessage->created_at) }}</td>
                </tr>
                @if ($contactMessage->read_at)
                <tr class="border-b border-gray-200">
                    <th class="text-left px-3 py-2">Read At</th>
                    <td class="px-3 py-2">{{ customDateTimeFormate($contactMessage->read_at) }}</td>
                </tr>
                @endif
                @if ($contactMessage->replied_at)
                <tr>
                    <th class="text-left px-3 py-2">Replied At</th>
                    <td class="px-3 py-2">{{ customDateTimeFormate($contactMessage->replied_at) }}</td>
                </tr>
                @endif
            </table>
        </div>
    </div>

    <!-- Message Content -->
    <div class="bg-white shadow rounded-lg">
        <div class="border-b p-5">
            <h5 class="text-lg font-semibold">Message Content</h5>
        </div>
        <div class="p-5">
            <div class="bg-gray-100 p-4 rounded whitespace-pre-wrap">
                {!! nl2br(e($contactMessage->message)) !!}
            </div>
        </div>
    </div>
</div>
@endsection