@extends('admin.master')

@section('content')
<style>
    .message-details-page {
        max-width: 900px;
        padding: 24px;
    }

    .message-details-card {
        overflow: hidden;
        border-radius: 10px;
        background: #ffffff;
    }

    .message-details-header {
        padding: 20px;
        background: #f8fafc;
    }

    .message-details-body {
        padding: 22px;
    }

    .message-details-grid {
        display: grid;
        grid-template-columns: 180px 1fr;
        border-top: 1px solid #e5e7eb;
    }

    .message-details-label,
    .message-details-value {
        padding: 13px 10px;
        border-bottom: 1px solid #e5e7eb;
    }

    .message-details-label {
        color: #64748b;
        font-weight: 700;
    }

    .message-details-value {
        color: #111827;
    }

    .message-details-text {
        margin-top: 20px;
        padding: 18px;
        border-radius: 8px;
        background: #f8fafc;
        color: #374151;
        line-height: 1.8;
        white-space: pre-wrap;
    }

    .message-details-back {
        display: inline-flex;
        margin-top: 20px;
        padding: 10px 16px;
        border-radius: 7px;
        background: #e2e8f0;
        color: #334155;
        font-weight: 700;
        text-decoration: none;
    }

    @media (max-width: 600px) {
        .message-details-grid {
            grid-template-columns: 1fr;
        }

        .message-details-label {
            padding-bottom: 3px;
            border-bottom: 0;
        }

        .message-details-value {
            padding-top: 3px;
        }
    }
</style>

<div class="message-details-page">
    <div class="message-details-card">
        <div class="message-details-header">
            <h1 style="margin:0 0 5px;">
                Contact Message
            </h1>

            <p style="margin:0;color:#64748b;">
                Submitted
                {{ $contactMessage->created_at->diffForHumans() }}
            </p>
        </div>

        <div class="message-details-body">
            <div class="message-details-grid">
                <div class="message-details-label">
                    Name
                </div>

                <div class="message-details-value">
                    {{ $contactMessage->name }}
                </div>

                <div class="message-details-label">
                    Mobile
                </div>

                <div class="message-details-value">
                    {{ $contactMessage->mobile_number }}
                </div>

                <div class="message-details-label">
                    Email
                </div>

                <div class="message-details-value">
                    <a
                        href="mailto:{{ $contactMessage->email }}"
                    >
                        {{ $contactMessage->email }}
                    </a>
                </div>

                <div class="message-details-label">
                    Feedback Type
                </div>

                <div class="message-details-value">
                    {{ $contactMessage->feedback_type_name }}
                </div>

                <div class="message-details-label">
                    Location
                </div>

                <div class="message-details-value">
                    {{ $contactMessage->location_name }}
                </div>
            </div>

            <div class="message-details-text">
                {{ $contactMessage->message
                    ?: 'No message was provided.' }}
            </div>

            <a
                href="{{ route(
                    'admin.contact-messages.index'
                ) }}"
                class="message-details-back"
            >
                ← Back to Messages
            </a>
        </div>
    </div>
</div>
@endsection