@extends('admin.layouts.app')

@section('content')
    <div class="content">
        <div class="container-fluid">
            <x-nav title="Show Contact Message" :route="''" :import="''"/>
            <!-- Page Title -->

            <div class="row">
                <div class="col-12">
                    <div class="card m-b-30">
                        <div class="card-body">


                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="message" style="color: #0a58ca">Name:</label>
                                        <div class="p-3 bg-light rounded">
                                            <p class="text-dark">
                                                {{ $contact->name }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="message" style="color: #0a58ca">Email:</label>
                                        <div class="p-3 bg-light rounded">
                                            <p class="text-dark">
                                                {{ $contact->email }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="message" style="color: #0a58ca">Phone Number:</label>
                                        <div class="p-3 bg-light rounded">
                                            <p class="text-dark">
                                                {{ $contact->phone_number }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="message" style="color: #0a58ca">Subject:</label>
                                        <div class="p-3 bg-light rounded">
                                            <p class="text-dark">
                                                {{ $contact->subject }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="message" style="color: #0a58ca">Message :</label>
                                        <div class="p-3 bg-light rounded">
                                            <p class="text-dark">
                                                {{ $contact->message }}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="created_at" style="color: #0a58ca">Received On:</label>
                                        <p>{{ $contact->created_at->format('M d, Y h:i A') }}</p>
                                    </div>
                                </div>

                                <!-- Optionally add a back button -->
                                <div class="col-12">
                                    <a href="{{ route('dashboard.contacts.index') }}" class="btn btn-secondary">
                                        Back to Contacts
                                    </a>
                                </div>
                            </div>

                        </div> <!-- end card-body -->
                    </div> <!-- end card -->
                </div> <!-- end col -->
            </div> <!-- end row -->
        </div> <!-- end container-fluid -->
    </div> <!-- end content -->
@endsection