@extends('layouts.master')

@section('content')
<div class="container" style="max-width: 700px;">
    <h3 style="font-weight: 800; margin-bottom: 5px;">عرض الرسالة</h3>
    <hr>

    <div style="text-align: right;">
        <div style="display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.5rem;">
            <div style="flex: 1; min-width: 200px;">
                <label style="color: #7777CC; font-weight: 700; font-size: 0.85em;">المرسل:</label>
                <div style="padding: 8px 12px; background: #bbbbd0; border: 1px solid #9999CC;">
                    {{ $contact->name }}
                </div>
            </div>
            <div style="flex: 1; min-width: 200px;">
                <label style="color: #7777CC; font-weight: 700; font-size: 0.85em;">البريد الإلكتروني:</label>
                <div style="padding: 8px 12px; background: #bbbbd0; border: 1px solid #9999CC; direction: ltr; text-align: right;">
                    {{ $contact->email }}
                </div>
            </div>
        </div>

        <div style="margin-bottom: 1.5rem;">
            <label style="color: #7777CC; font-weight: 700; font-size: 0.85em;">الموضوع:</label>
            <div style="padding: 8px 12px; background: #bbbbd0; border: 1px solid #9999CC;">
                {{ $contact->subject }}
            </div>
        </div>

        <div style="margin-bottom: 1.5rem;">
            <label style="color: #7777CC; font-weight: 700; font-size: 0.85em;">التاريخ:</label>
            <div style="padding: 8px 12px; background: #bbbbd0; border: 1px solid #9999CC; direction: ltr; text-align: right;">
                {{ $contact->created_at }}
            </div>
        </div>

        <div style="margin-bottom: 1.5rem;">
            <label style="color: #7777CC; font-weight: 700; font-size: 0.85em;">الرسالة:</label>
            <div style="padding: 15px; background: #bbbbd0; border: 1px solid #9999CC; white-space: pre-wrap; line-height: 1.8;">{{ $contact->message }}</div>
        </div>
    </div>

    <hr>
    <div style="display: flex; gap: 0.5rem; justify-content: center;">
        <a href="/admin/contacts" class="btn btn-outline-primary">الرجوع للرسائل</a>
        <form class="delete" method="POST" action="/admin/contacts/{{ $contact->id }}/delete" style="display: inline;">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-danger">حذف الرسالة</button>
        </form>
    </div>
</div>
@endsection
