@extends('layouts.admin')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="h4 mb-0 text-gray-800">Contact Submission Details</h2>
    <a href="{{ route('admin.contact_submissions.index') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> Back to List
    </a>
</div>

<div class="card shadow mb-4 border-0">
    <div class="card-header py-3 bg-white">
        <h6 class="m-0 font-weight-bold text-primary">Message from {{ $contactSubmission->name }}</h6>
    </div>
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-6">
                <strong>Name:</strong>
                <p>{{ $contactSubmission->name }}</p>
            </div>
            <div class="col-md-6">
                <strong>Email:</strong>
                <p><a href="mailto:{{ $contactSubmission->email }}">{{ $contactSubmission->email }}</a></p>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-md-6">
                <strong>Subject:</strong>
                <p>{{ $contactSubmission->subject }}</p>
            </div>
            <div class="col-md-6">
                <strong>Submitted:</strong>
                <p>{{ $contactSubmission->created_at->format('F d, Y \a\t h:i A') }}</p>
            </div>
        </div>
        <div class="mb-3">
            <strong>Message:</strong>
            <div class="p-3 bg-light rounded mt-2">
                {{ $contactSubmission->message }}
            </div>
        </div>
        <div class="mt-4">
            <form action="{{ route('admin.contact_submissions.destroy', $contactSubmission->id) }}" method="POST" class="d-inline">
                @csrf
                @method('DELETE')
                <button type="button" class="btn btn-danger" onclick="confirmDelete('{{ route('admin.contact_submissions.destroy', $contactSubmission->id) }}')">
                    <i class="fas fa-trash"></i> Delete Submission
                </button>
            </form>
        </div>
    </div>
</div>
@endsection