@extends('layouts.admin.base')

@section('page.title', 'Message de ' . $message->firstname)

@section('page.content')
    <div class="flex mb-4">
        <a href="{{ route('admin.contact-messages.list') }}" class="px-3 py-1 text-sm bg-gray-600 text-white rounded shadow"><i class="bi bi-arrow-left"></i> Retour</a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="md:col-span-2 grid gap-4 mb-auto">
            <div class="bg-slate-50 border rounded shadow-sm p-4">
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-4">
                    @include('components.forms.inputs.classic-light', [
                        'id' => 'firstname',
                        'label' => 'Prénom',
                        'value' => $message->firstname,
                        'disabled' => true,
                    ])
                    @include('components.forms.inputs.classic-light', [
                        'id' => 'lastname',
                        'label' => 'Nom de famille',
                        'value' => $message->lastname,
                        'disabled' => true,
                    ])
                </div>

                @include('components.forms.inputs.textarea-light', [
                    'id' => 'message',
                    'label' => 'Message',
                    'value' => $message->message,
                    'disabled' => true,
                ])
            </div>
        </div>
        <div class="grid gap-4 mb-auto">
            <div class="bg-slate-50 border rounded shadow-sm p-4">
                <p class="text-lg font-semibold mb-2">Centre concerné</p>
                <p>{{ $message->center_to_contact }}</p>
            </div>

            <div class="bg-slate-50 border rounded shadow-sm p-4">
                <p class="text-lg font-semibold mb-2">Contact</p>
                <p class="text-gray-500">Email</p>
                <p>{{ $message->email }}</p>

                <p class="text-gray-500 mt-4">Téléphone</p>
                <p>{{ $message->phone }}</p>
            </div>

            <div class="bg-slate-50 border rounded shadow-sm p-4">
                <p class="text-lg font-semibold mb-2">Adresse</p>
                @isset($message->address)
                    <p>{{ $message->address->street }},</p>
                    <p>{{ $message->address->post_code }}, {{ $message->address->city }}</p>
                @else
                    <p class="text-gray-500">Non communiqué</p>
                @endisset
            </div>
        </div>
    </div>
@endsection