@extends('user::layouts.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('user.contact-message.index') }}" class="btn btn-primary">
                <i class="fas fa-arrow-left me-2"></i> Back to Messages
            </a>
        </div>
    </div>

    <div class="flex flex-col gap-6">
        <!-- Message Details -->
        <div class="card">
            <h5 class="text-lg font-semibold mb-5">Message Details</h5>

            <x-backend::table-wrapper>
                <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
                    <tr>
                        <th class="text-left px-3 py-2">Status</th>
                        <td class="px-3 py-2">
                            @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 inline-flex items-center gap-2">
                                <i class="fas fa-{{ $config['icon'] }}"></i>
                                {{ ucfirst($contactMessage->status) }}
                            </span>
                        </td>
                    </tr>
                </table>
            </x-backend::table-wrapper>
        </div>

        <!-- Message Content -->
        <div class="card">
            <h5 class="text-lg font-semibold mb-2">Message Content</h5>
            <div>
                {!! nl2br(e($contactMessage->message)) !!}
            </div>
        </div>
    </div>
@endsection