<div>
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">رسائل التواصل</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">الرسائل الواردة من نموذج التواصل في الموقع</p>
        </div>
        <a href="{{ route('website.manage.sections') }}" class="px-4 py-2 text-sm font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            ← إدارة الأقسام
        </a>
    </div>

    {{-- Status Filter --}}
    <div class="flex items-center gap-2 mb-4">
        <button wire:click="$set('status', '')" class="px-3 py-1.5 text-sm rounded-lg transition-colors {{ $status === '' ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
            الكل
        </button>
        <button wire:click="$set('status', 'new')" class="px-3 py-1.5 text-sm rounded-lg transition-colors {{ $status === 'new' ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
            جديد
        </button>
        <button wire:click="$set('status', 'read')" class="px-3 py-1.5 text-sm rounded-lg transition-colors {{ $status === 'read' ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
            مقروء
        </button>
        <button wire:click="$set('status', 'replied')" class="px-3 py-1.5 text-sm rounded-lg transition-colors {{ $status === 'replied' ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
            تم الرد
        </button>
        <button wire:click="$set('status', 'archived')" class="px-3 py-1.5 text-sm rounded-lg transition-colors {{ $status === 'archived' ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
            أرشيف
        </button>
    </div>

    {{-- Submissions Table --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
        @if($submissions->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 dark:bg-gray-700/50">
                        <tr>
                            <th class="px-4 py-3 text-start font-medium text-gray-700 dark:text-gray-300">الاسم</th>
                            <th class="px-4 py-3 text-start font-medium text-gray-700 dark:text-gray-300">البريد / الهاتف</th>
                            <th class="px-4 py-3 text-start font-medium text-gray-700 dark:text-gray-300">الرسالة</th>
                            <th class="px-4 py-3 text-start font-medium text-gray-700 dark:text-gray-300">الحالة</th>
                            <th class="px-4 py-3 text-start font-medium text-gray-700 dark:text-gray-300">التاريخ</th>
                            <th class="px-4 py-3 text-start font-medium text-gray-700 dark:text-gray-300">إجراءات</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                        @foreach($submissions as $submission)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 {{ $submission->status->value === 'new' ? 'bg-blue-50/50 dark:bg-blue-900/10' : '' }}">
                                <td class="px-4 py-3">
                                    <span class="font-medium text-gray-900 dark:text-white {{ $submission->status->value === 'new' ? 'font-bold' : '' }}">
                                        {{ $submission->name }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                                    <div dir="ltr" class="text-start">{{ $submission->email }}</div>
                                    @if($submission->phone)
                                        <div dir="ltr" class="text-xs text-gray-400">{{ $submission->phone }}</div>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-gray-600 dark:text-gray-400 max-w-xs">
                                    <p class="line-clamp-2">{{ $submission->message }}</p>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium
                                        {{ $submission->status->value === 'new' ? 'bg-blue-100 text-blue-700' : '' }}
                                        {{ $submission->status->value === 'read' ? 'bg-gray-100 text-gray-700' : '' }}
                                        {{ $submission->status->value === 'replied' ? 'bg-green-100 text-green-700' : '' }}
                                        {{ $submission->status->value === 'archived' ? 'bg-gray-100 text-gray-500' : '' }}
                                    ">
                                        {{ $submission->status->label() }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-gray-500 text-xs whitespace-nowrap">
                                    {{ $submission->created_at->diffForHumans() }}
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center gap-1">
                                        @if($submission->status->value === 'new')
                                            <button wire:click="markAsRead({{ $submission->id }})" class="p-1.5 text-gray-400 hover:text-blue-600 rounded transition-colors" title="تحديد كمقروء">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76"/></svg>
                                            </button>
                                        @endif
                                        @if($submission->status->value !== 'archived')
                                            <button wire:click="archive({{ $submission->id }})" class="p-1.5 text-gray-400 hover:text-amber-600 rounded transition-colors" title="أرشفة">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/></svg>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700">
                {{ $submissions->links() }}
            </div>
        @else
            <div class="text-center py-12">
                <svg class="w-12 h-12 mx-auto text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
                <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">لا توجد رسائل {{ $status ? 'بهذه الحالة' : '' }}</h3>
                <p class="mt-2 text-gray-500 text-sm">ستظهر هنا الرسائل الواردة من نموذج التواصل</p>
            </div>
        @endif
    </div>
</div>
