@extends('dashboard.layouts.base')
@section('content')
<style>
.card-header::after {
    content: none !important;
}

#contacts-table th,
#contacts-table td {
    vertical-align: middle;
    text-align: center;
}

/* ✅ يجعل الجدول قابل للتمرير أفقياً بدون ما يخرج */
.table-responsive {
    overflow-x: auto;
}

/* ✅ يجعل الاتجاه بالكامل RTL */
.card, .card-body, .card-header {
    direction: rtl;
}

/* ✅ يمنع السايدبار من الظهور الزائد */
.content-wrapper {
    overflow-x: hidden;
}
</style>

<div class="col-12">
    <div class="card">
        <div class="card-header d-flex flex-row-start justify-content-between align-items-center w-100">
            <h3 class="card-title mb-0">رسائل اتصل بنا</h3>
        </div>

        <div class="card-body">
            <div id="contacts_wrapper" class="dataTables_wrapper dt-bootstrap4">
                <div class="table-responsive">
                    <table id="contacts-table" class="table table-bordered table-hover text-center">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>البريد الإلكتروني</th>
                                <th>العنوان</th>
                                <th>الوصف</th>
                                <th>المستخدم</th>
                                <th>رقم الهاتف</th>
                                <th>تاريخ الإرسال</th>
                                <th>العمليات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($contacts as $index => $contact)
                                <tr>
                                    <td>{{ $contacts->firstItem() + $index }}</td>
                                    <td>{{ $contact->email }}</td>
                                    <td>{{ $contact->title }}</td>
                                    <td>{{ $contact->description }}</td>
                                    <td>
                                        @if($contact->user)
                                            <div class="d-flex align-items-center justify-content-center gap-2">
                                                <span>{{ $contact->user->name }}</span>
                                            </div>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>{{ $contact->user?->phone ?? '-' }}</td>
                                    <td>{{ $contact->created_at?->format('Y-m-d H:i') ?? '-' }}</td>
                                    <td>
                                        <form action="{{ route('dashboard.contact-us.delete', $contact->id) }}" 
                                              method="POST" 
                                              style="display: inline-block;" 
                                              onsubmit="return confirm('هل أنت متأكد من حذف هذه الرسالة؟');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm">حذف</button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8">لا توجد رسائل</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="row mt-3">
                    <div class="col-12 d-flex justify-content-start">
                        {{ $contacts->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection