@extends('layouts.admin')

@section('title', 'View Message | Admin')

@section('content')

<div class="container py-5">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-1">Contact Message</h1>
            <p class="text-muted mb-0">
                View visitor enquiry details.
            </p>
        </div>

        <a
            href="{{ route('admin.messages.index') }}"
            class="btn btn-outline-secondary"
        >
            Back to Messages
        </a>
    </div>

    <div class="card border-0 shadow-sm">

        <div class="card-body p-4 p-lg-5">

            <div class="row g-4">

                <div class="col-md-6">
                    <strong>Name</strong>
                    <div class="mt-1">
                        {{ $contactMessage->name }}
                    </div>
                </div>

                <div class="col-md-6">
                    <strong>Email</strong>
                    <div class="mt-1">
                        <a href="mailto:{{ $contactMessage->email }}">
                            {{ $contactMessage->email }}
                        </a>
                    </div>
                </div>

                <div class="col-md-6">
                    <strong>Phone</strong>
                    <div class="mt-1">
                        {{ $contactMessage->phone ?: '—' }}
                    </div>
                </div>

                <div class="col-md-6">
                    <strong>Subject</strong>
                    <div class="mt-1">
                        {{ $contactMessage->subject ?: '—' }}
                    </div>
                </div>

                <div class="col-12">
                    <strong>Received</strong>
                    <div class="mt-1">
                        {{ $contactMessage->created_at->format('d M Y, h:i A') }}
                    </div>
                </div>

                <div class="col-12">
                    <hr>

                    <strong>Message</strong>

                    <div class="bg-light rounded p-4 mt-2">
                        {!! nl2br(e($contactMessage->message)) !!}
                    </div>
                </div>

            </div>

            <hr class="my-4">

            <form
                action="{{ route('admin.messages.destroy', $contactMessage) }}"
                method="POST"
            >
                @csrf
                @method('DELETE')

                <button
                    type="submit"
                    class="btn btn-outline-danger"
                    onclick="return confirm('Delete this message?')"
                >
                    Delete Message
                </button>
            </form>

        </div>

    </div>

</div>

@endsection