@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto p-6 bg-white shadow rounded" x-data="{ openDeleteModal: false, deleteUrl: '' }">
    <div class="flex justify-between items-center mb-4">
        <h1 class="text-2xl font-bold">إشعاراتي</h1>
        <div class="flex space-x-2 space-x-reverse">
            {{-- ✅ زر لتمييز كل الإشعارات كمقروءة --}}
            @if(auth()->user()->unreadNotifications->count() > 0)
                <form id="mark-all-form" action="{{ route('notifications.markAllAsRead') }}" method="POST">
                    @csrf
                    <button type="submit" class="text-blue-600 hover:text-blue-800 text-sm">
                        تمييز الكل كمقروء
                    </button>
                </form>
            @endif
            {{-- ✅ زر لحذف كل الإشعارات --}}
            @if(auth()->user()->notifications->count() > 0)
                <button @click="openDeleteModal = true; deleteUrl = '{{ route('notifications.destroyAll') }}'"
                        id="delete-all-btn" class="text-red-600 hover:text-red-800 text-sm">
                    حذف جميع الإشعارات
                </button>
            @endif
        </div>
    </div>

    <ul class="divide-y divide-gray-200">
        @forelse($notifications as $notification)
            <li class="py-4 px-2 hover:bg-brand-light-gray transition {{ $notification->read_at ? 'bg-white' : 'bg-blue-50' }}"
                id="notification-{{ $notification->id }}">
                <div class="flex justify-between items-start">
                    <a href="{{ route('notifications.read', $notification->id) }}" class="block flex-1">
                        <p class="font-semibold {{ $notification->read_at ? 'text-brand-text' : 'text-brand-text' }}">
                            {{ $notification->data['title'] }}
                        </p>
                        <p class="text-sm {{ $notification->read_at ? 'text-brand-text' : 'text-brand-text' }}">
                            {{ $notification->data['body'] }}
                        </p>
                    </a>
                    <div class="flex flex-col items-end space-y-1">
                        <small class="text-xs text-brand-text">{{ $notification->created_at->diffForHumans() }}</small>
                        @if(!$notification->read_at)
                            <form action="{{ route('notifications.markAsRead', $notification->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <button type="submit" class="text-blue-500 hover:text-blue-700 text-xs font-semibold">
                                    ✓ تمييز كمقروء
                                </button>
                            </form>
                        @else
                            <form action="{{ route('notifications.markAsUnread', $notification->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <button type="submit" class="text-yellow-500 hover:text-yellow-700 text-xs font-semibold">
                                    • تمييز كغير مقروء
                                </button>
                            </form>
                        @endif
                        {{-- ✅ زر لحذف الإشعار --}}
                        <button @click="openDeleteModal = true; deleteUrl = '{{ route('notifications.destroy', $notification->id) }}'"
                                class="text-red-500 hover:text-red-700 text-xs font-semibold">
                            حذف
                        </button>
                    </div>
                </div>
            </li>
        @empty
            <p class="text-brand-text text-center py-4">لا توجد إشعارات حالياً.</p>
        @endforelse
    </ul>

    {{-- ✅ روابط الترقيم --}}
    <div class="mt-4">
        {{ $notifications->links() }}
    </div>

    {{-- ✅ نافذة modal مخصصة للحذف --}}
    <div x-show="openDeleteModal" x-cloak class="fixed inset-0 bg-brand-text/80 bg-opacity-50 overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3 text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                    <svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.332 16c-.77 1.333.192 3 1.732 3z"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-bold text-brand-text mt-2">تأكيد الحذف</h3>
                <div class="mt-2 px-7 py-3">
                    <p class="text-sm text-brand-text">هل أنت متأكد أنك تريد حذف هذا الإشعار؟ لا يمكن التراجع عن هذا الإجراء.</p>
                </div>
                <div class="items-center px-4 py-3">
                    <form :action="deleteUrl" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">
                            حذف
                        </button>
                    </form>
                    <button @click="openDeleteModal = false" class="mt-2 px-4 py-2 bg-brand-text/70 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-brand-text/80 focus:outline-none focus:ring-2 focus:ring-gray-500">
                        إلغاء
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

        // ✅ معالجة حذف جميع الإشعارات
        document.getElementById('delete-all-btn')?.addEventListener('click', () => {
            if (!confirm('هل تريد حذف جميع الإشعارات؟')) return;

            fetch("{{ route('notifications.destroyAll') }}", {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': csrfToken }
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                } else {
                    alert('فشل حذف الإشعارات. حاول مرة أخرى.');
                }
            })
            .catch(error => {
                console.error('Error deleting all notifications:', error);
                alert('حدث خطأ أثناء حذف الإشعارات.');
            });
        });
    });
</script>
@endpush
@endsection