@extends('layouts.superadmin')

@section('title', 'تفاصيل الإشعار')

@section('content')
<div class="container mx-auto px-4 py-6 rtl">
    <!-- Page Header -->
    <div class="mb-6">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <div class="flex items-center gap-2 mb-2">
                    <a href="{{ route('superadmin.notifications.index') }}" 
                       class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                        </svg>
                    </a>
                    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">تفاصيل الإشعار</h1>
                </div>
                <p class="text-gray-600 dark:text-gray-400">عرض تفاصيل الإشعار وإحصائيات القراءة</p>
            </div>
     
        </div>
    </div>

    <!-- Notification Details Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-6">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <div class="flex justify-between items-center">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">معلومات الإشعار</h2>
                <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full 
                    @if($notification->status === 'sent') bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200
                    @else bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200
                    @endif">
                    {{ $notification->status_text }}
                </span>
            </div>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- معلومات أساسية -->
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">العنوان</label>
                        <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ $notification->title }}</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">المحتوى</label>
                        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                            <p class="text-gray-900 dark:text-white whitespace-pre-wrap">{{ $notification->content }}</p>
                        </div>
                    </div>
                    
                    @if($notification->attachment)
                        <div>
                            <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">المرفق</label>
                            <div class="flex items-center space-x-3 space-x-reverse">
                                @if($notification->isAttachmentImage())
                                    <button type="button" 
                                            class="view-attachment-btn flex items-center space-x-2 space-x-reverse px-3 py-2 bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-900/70 transition duration-200"
                                            data-notification-id="{{ $notification->id }}">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                        </svg>
                                        <span>عرض الصورة</span>
                                    </button>
                                @else
                                    <a href="{{ route('superadmin.notifications.download-attachment', $notification) }}" 
                                       class="flex items-center space-x-2 space-x-reverse px-3 py-2 bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 rounded-lg hover:bg-green-200 dark:hover:bg-green-900/70 transition duration-200">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                        </svg>
                                        <span>تحميل الملف</span>
                                    </a>
                                @endif
                                <span class="text-sm text-gray-500 dark:text-gray-400">{{ $notification->attachment }}</span>
                            </div>
                        </div>
                    @endif
                </div>
                
                <!-- معلومات تقنية -->
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">نوع المستلمين</label>
                        <span class="inline-flex px-2 py-1 text-sm font-semibold rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200">
                            {{ $notification->recipient_type_text }}
                        </span>
                    </div>
                    
                    @if($notification->recipient_type !== 'all' && $notification->recipient_data)
                        <div>
                            <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">التفاصيل</label>
                            <div class="flex flex-wrap gap-2">
                                @if($notification->recipient_type === 'roles')
                                    @foreach($notification->recipient_data as $roleName)
                                        @php
                                            $role = \Spatie\Permission\Models\Role::where('name', $roleName)->first();
                                        @endphp
                                        <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
                                            {{ $role ? $role->display_name : $roleName }}
                                        </span>
                                    @endforeach
                                @elseif($notification->recipient_type === 'specific_users')
                                    @foreach($notification->recipients as $user)
                                        <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
                                            {{ $user->name }}
                                        </span>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    @endif
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">منشئ الإشعار</label>
                        <p class="text-gray-900 dark:text-white">{{ $notification->creator->name }}</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">تاريخ الإنشاء</label>
                        <p class="text-gray-900 dark:text-white">{{ $notification->created_at->format('Y/m/d H:i') }}</p>
                    </div>
                    
                    @if($notification->sent_at)
                        <div>
                            <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">تاريخ الإرسال</label>
                            <p class="text-gray-900 dark:text-white">{{ $notification->sent_at->format('Y/m/d H:i') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @if($notification->status === 'sent')
        <!-- Statistics Cards -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border-r-4 border-blue-500">
                <div class="flex items-center">
                    <div class="p-3 bg-blue-100 dark:bg-blue-900/20 rounded-full">
                        <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                    </div>
                    <div class="mr-4">
                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($stats['total_recipients']) }}</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">إجمالي المستلمين</p>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border-r-4 border-green-500">
                <div class="flex items-center">
                    <div class="p-3 bg-green-100 dark:bg-green-900/20 rounded-full">
                        <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                    </div>
                    <div class="mr-4">
                        <h3 class="text-2xl font-bold text-green-600 dark:text-green-400">{{ number_format($stats['read_count']) }}</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">تم قراءته</p>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border-r-4 border-red-500">
                <div class="flex items-center">
                    <div class="p-3 bg-red-100 dark:bg-red-900/20 rounded-full">
                        <svg class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div class="mr-4">
                        <h3 class="text-2xl font-bold text-red-600 dark:text-red-400">{{ number_format($stats['unread_count']) }}</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">لم يقرأ بعد</p>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border-r-4 border-purple-500">
                <div class="flex items-center">
                    <div class="p-3 bg-purple-100 dark:bg-purple-900/20 rounded-full">
                        <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2-2V7a2 2 0 012-2h2a2 2 0 002 2v2a2 2 0 002 2h2a2 2 0 012-2V7a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 00-2 2h-2a2 2 0 00-2 2v6a2 2 0 01-2 2H11a2 2 0 01-2-2z"></path>
                        </svg>
                    </div>
                    <div class="mr-4">
                        <h3 class="text-2xl font-bold text-purple-600 dark:text-purple-400">{{ $stats['read_percentage'] }}%</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">معدل القراءة</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recipients Table -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <div class="flex justify-between items-center">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">قائمة المستلمين</h2>
                    <div class="flex items-center space-x-4 space-x-reverse">
                        <div class="flex items-center space-x-2 space-x-reverse">
                            <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                            <span class="text-sm text-gray-600 dark:text-gray-400">تم القراءة</span>
                        </div>
                        <div class="flex items-center space-x-2 space-x-reverse">
                            <div class="w-3 h-3 bg-gray-400 rounded-full"></div>
                            <span class="text-sm text-gray-600 dark:text-gray-400">لم يقرأ بعد</span>
                        </div>
                    </div>
                </div>
            </div>

            @if($notification->notificationRecipients->count() > 0)
                <div class="overflow-x-auto">
                    <table class="w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-900">
                            <tr>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">العضو</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">الدور</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">حالة القراءة</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">وقت القراءة</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach($notification->notificationRecipients as $recipient)
                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="w-3 h-3 rounded-full ml-3 {{ $recipient->read ? 'bg-green-500' : 'bg-gray-400' }}"></div>
                                            <div>
                                                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $recipient->user->name }}</div>
                                                <div class="text-sm text-gray-500 dark:text-gray-400">{{ $recipient->user->email }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200">
                                            {{ $recipient->user->role_name }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if($recipient->read)
                                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200">
                                                تم القراءة
                                            </span>
                                        @else
                                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 dark:bg-gray-900/50 text-gray-800 dark:text-gray-200">
                                                لم يقرأ
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                        @if($recipient->read_at)
                                            <div>{{ $recipient->read_at->format('Y/m/d') }}</div>
                                            <div>{{ $recipient->read_at->format('H:i') }}</div>
                                        @else
                                            <span class="text-gray-400">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-12">
                    <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">لا يوجد مستلمين</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">لم يتم إرسال هذا الإشعار بعد</p>
                </div>
            @endif
        </div>
    @else
        <!-- Draft Message -->
        <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                    </svg>
                </div>
                <div class="mr-3">
                    <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">إشعار في المسودة</h3>
                    <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
                        <p>هذا الإشعار محفوظ كمسودة ولم يتم إرساله للأعضاء بعد. يمكنك تعديله أو إرساله من خلال الأزرار أعلاه.</p>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

<!-- Attachment Preview Modal -->
<!-- Attachment Preview Modal -->
<div id="attachment-preview-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-2xl max-w-5xl w-full max-h-[95vh] flex flex-col shadow-2xl">
        <!-- Header -->
        <div class="flex justify-between items-center px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
            <h3 id="preview-title" class="text-xl font-bold text-gray-900 dark:text-white">معاينة المرفق</h3>
            <button type="button" 
                    id="close-preview-modal-btn"
                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        
        <!-- Content -->
        <div id="preview-content" class="p-6 overflow-auto flex-1 flex items-center justify-center">
            <!-- المحتوى سيتم ملؤه بواسطة JavaScript -->
        </div>
    </div>
</div>




<script>
document.addEventListener('DOMContentLoaded', function() {
    const previewModal = document.getElementById('attachment-preview-modal');
    const closePreviewBtn = document.getElementById('close-preview-modal-btn');
    
    // إغلاق مودال المعاينة
    if (closePreviewBtn) {
        closePreviewBtn.addEventListener('click', function() {
            previewModal.classList.add('hidden');
        });
    }
    
    // إغلاق المودال عند الضغط على الخلفية
    previewModal.addEventListener('click', function(e) {
        if (e.target === previewModal) {
            previewModal.classList.add('hidden');
        }
    });

    // عرض المرفقات
    document.addEventListener('click', function(e) {
        if (e.target.closest('.view-attachment-btn')) {
            e.preventDefault();
            const notificationId = e.target.closest('.view-attachment-btn').dataset.notificationId;
            viewAttachment(notificationId);
        }
    });

    // إرسال الإشعار
    document.addEventListener('click', function(e) {
        if (e.target.closest('.send-notification-btn')) {
            e.preventDefault();
            const notificationId = e.target.closest('.send-notification-btn').dataset.notificationId;
            sendNotification(notificationId);
        }
    });

    // حذف الإشعار
    document.addEventListener('click', function(e) {
        if (e.target.closest('.delete-notification-btn')) {
            e.preventDefault();
            const notificationId = e.target.closest('.delete-notification-btn').dataset.notificationId;
            deleteNotification(notificationId);
        }
    });

    function viewAttachment(notificationId) {
        fetch(`/superadmin/notifications/${notificationId}/attachment`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const previewContent = document.getElementById('preview-content');
                    document.getElementById('preview-title').textContent = `معاينة مرفق: ${data.data.title}`;
                    
                if (data.data.is_image) {
    previewContent.innerHTML = `
        <div class="w-full h-full flex items-center justify-center">
            <img src="${data.data.attachment_url}" 
                 alt="مرفق الإشعار" 
                 class="max-w-full max-h-[70vh] w-auto h-auto object-contain rounded-lg shadow-2xl">
        </div>
    `;
}
 else {
                        previewContent.innerHTML = `
                            <div class="text-center py-12">
                                <svg class="mx-auto h-16 w-16 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                </svg>
                                <p class="mt-4 text-lg text-gray-600 dark:text-gray-400 font-medium">ملف غير قابل للمعاينة</p>
                                <p class="mt-2 text-sm text-gray-500 dark:text-gray-500">${data.data.attachment}</p>
                                <a href="${data.data.download_url}" 
                                   class="mt-4 inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition duration-200">
                                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                    </svg>
                                    تحميل الملف
                                </a>
                            </div>
                        `;
                    }
                    
                    previewModal.classList.remove('hidden');
                } else {
                    showAlert('خطأ', data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('خطأ', 'حدث خطأ أثناء عرض المرفق', 'error');
            });
    }

    function sendNotification(notificationId) {
        if (!confirm('هل أنت متأكد من إرسال هذا الإشعار؟ لا يمكن التراجع عن هذا الإجراء.')) {
            return;
        }
        
        fetch(`/superadmin/notifications/${notificationId}/send`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('نجح', data.message, 'success');
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                showAlert('خطأ', data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('خطأ', 'حدث خطأ أثناء إرسال الإشعار', 'error');
        });
    }

    function deleteNotification(notificationId) {
        if (!confirm('هل أنت متأكد من حذف هذا الإشعار؟ لا يمكن التراجع عن هذا الإجراء.')) {
            return;
        }
        
        fetch(`/superadmin/notifications/${notificationId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('نجح', data.message, 'success');
                setTimeout(() => {
                    window.location.href = '{{ route("superadmin.notifications.index") }}';
                }, 1500);
            } else {
                showAlert('خطأ', data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('خطأ', 'حدث خطأ أثناء حذف الإشعار', 'error');
        });
    }

    function showAlert(title, message, type) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `fixed top-4 left-4 z-50 p-4 rounded-lg shadow-lg max-w-md ${
            type === 'success' ? 'bg-green-100 text-green-800 border border-green-200 dark:bg-green-900/50 dark:text-green-200 dark:border-green-700' :
            type === 'error' ? 'bg-red-100 text-red-800 border border-red-200 dark:bg-red-900/50 dark:text-red-200 dark:border-red-700' :
            'bg-blue-100 text-blue-800 border border-blue-200 dark:bg-blue-900/50 dark:text-blue-200 dark:border-blue-700'
        }`;
        alertDiv.innerHTML = `
            <div class="flex items-start">
                <div class="flex-1">
                    <h4 class="font-semibold text-lg mb-1">${title}</h4>
                    <p class="text-sm">${message}</p>
                </div>
                <button type="button" class="mr-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" onclick="this.parentElement.parentElement.remove()">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        `;
        
        document.body.appendChild(alertDiv);
        
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    }
});
</script>


@endsection